Learn to use Google Map APIs

Using Google Map API – Basic

Using Google Map API – Basic

Most of the mapping applications / software are not free; however, Google offers free maps and allows anyone to use their API. Of course there are other mapping services, such as Yahoo Maps and MapQuest. There are also several costly products, such as MapInfo, But, Google Maps API seems to work for everyone in just about every situation. I’m the developer for ILOVENY’s Summer site (see the attached screen shot) and I used Google Maps for all the maps used on on ILoveNY.com.

For a good example of using color symbols in a website map, look at the Rail Station map I created for the website.

In this article I will show you how to use Google Map API within any HTML page.

Step 1. Create a HTML or .Net page, let’s call it Sample_1

Step 2. Within the HEAD section, enter the below JavaScript line.

<script src="https://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxSsTL4WIgxhMZ0ZK_kHjwHeQuOD4xSbZqVZW2U_OWOxMp3YPfzZl2GavQ"


Let’s talk about this line for a minute. It uses “src” which is source of the JavaScript which is hosted by Google so we do not have to have this file in our folder. Notice one of the Query String is “file=api”, this tells the JavaScript that we are using Google Maps as API (Application Programming Interface).

Step 3. Again within the HEAD section, enter the below script / code.

<script type="text/javascript">

function initialize(){

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map_canvas"));

map.setCenter(new GLatLng(42.732419,-73.690989), 13);

map.addControl(new GSmallMapControl());

var marker = new GMarker(new GLatLng(42.732419,-73.690989));

GEvent.addListener(marker, "click", function() {

var html = ‘<div style="width: 210px; padding-right: 10px">BrightHub<br>270 River St<br>Troy, NY 12180<\/a>.<\/div>’;




GEvent.trigger(marker, "click");




Let’s talk about this code for few seconds. We have a function, named initialize (we can name it anything we want). This function / method is the container of our Google Map code. It is normal that you won’t understand this code if you are not a programmer or don’t understand HTML, but that is OK, because once you run the application all will make sense. You can always come back to review the code again. Every physical location has coordinates (X and Y) and for BrightHub located in Troy, NY those coordinates are 42.732419,-73.690989.

Step 4. Modify the BODY tag of your HTML page to match this,

<body onload="initialize()" onunload="GUnload()">

Step 5. Now let’s add a place holder for Google Maps. Add the following code within the BODY tag

<div id="map_canvas" style="border: 1px solid #979797; background-color: #e5e3df;

width: 500px; height: 350px; margin: auto; margin-top: 2em; margin-bottom: 2em">

<div style="padding: 1em; color: gray">Loading…</div>


Notice we have id=”map_canvas”. This is used by Step 3 above and our code in Step 3 will load Google Maps here.

That is all, now you have a page that will show Google Maps using the API, offered by Google for free.

Of course, I have a complete project which you can download and see how it works. You can download my finished sample project from here: https://www.brighthub.comhttps://images.brighthub.com/media/29E18B_googlemapapisample.zip


Google Map API
I LOVE NY - Summer