How to add a basic Google map API to your website

You are tasked with implementing a google maps API to your website, but don't know where to start. Don't fret, I am going to show you a basic overview of how to add a google map to your website.

First you need to sign up for a google maps API key. Log into your google account and then go to http://code.google.com/apis/maps/signup.html. At the bottom of the page, put a check mark in the terms and conditions box and in the My Website URL text box put your people.emich.edu website address. (ie. http://people.emich.edu/jguest) By putting in this website address, it will allow you to run google maps from any webpage that resides under this pathing structure. (ie. http://people.emich.edu/jguest/google/index.html. Clicking Generate API Key will provide you a page with your own personalized API key to access google maps.

Since we are programming in Javascript, go to the Javascript Maps API Example in the middle of the screen and copy and paste all of the text(including your API key) from the script tag to the /script tag into your webpages header. This will allow you to access the google maps API to implement into your webpage.

The next step will be to program your html page with a map object in order to place the google map into. To do this you will have insert

in the body of the html page. The "id" will be used by the the google maps API to insert the map into this object. The width and height can be set to your desired map size along with the position of the map on your webpage. You can purchase an HTML or CSS stylesheet guide like this one to assist in the setup of this element. http://www.amazon.com/HTML-XHTML-Sixth-Elizabeth-Castro/dp/0321430840/ref=sr_1_1?ie=UTF8&s=books&qid=1254182146&sr=8-1


Next will be to add the javascript to your webpage. For ease of demonstration we can insert the following text directly into the header of your webpage, however when implementing into your project you may want to follow the Head First AJAX books advice and insert the code into a separate javascript file.

Javascript Code Breakdown:
var map = new GMap2(document.getElementById("map_canvas"));
This creates the google map and inserts it into the "map_canvas" object that was created in the body of the html code. Remember, our code has made this map 500px wide and 300px high

map.setCenter(new GLatLng(42.240963,-83.618987), 13);>>
This sets the center of the map to the map coordinates of your choice, in my case I have set the center to the coordinates for Ypsilanti, MI

One final step is to set the javascript to run after the html loads by editing the body tag of the html document as follows. This will initialize the map and place it into the "map_canvas" object.

The final code should look like this:

You can see the map demonstration here:
http://people.emich.edu/jguest//IS449W/google/index.html

As you can see from the final product, the map shows Ypsilanti, MI but doesn't show any map controls. I will address this issue in my next post.

Enjoy!!