Google Map API

I was able to play around with the Google Maps API for my Iteration 2 Individual Project. What I found was that the API is very well documented and there are plenty of examples of code for you to choose from. I wanted the map to key off of two coordinates, longitude and latitude and then return the map to my DIV tag called "googlemap" the first thing I had to do was apply for a key from google in order to use the maps. I did that here. Next, once I received the key I had to put in two different script tag elements into the web page.



Once that was done I then had to create the javascript that was necessary in order to grab the coordinates and return the map to my div tag. I wanted a couple different options for users; to be able to zoom in and out of the map and to place a marker at the coordinates given to the api. I found that this was not too difficult to do.

function setupMap(lat, long) {

if (GBrowserIsCompatible()) {
var center = new GLatLng(lat, long);
map = new GMap2(document.getElementById("googlemap"));
map.addControl(new GLargeMapControl());
map.setCenter(center, 09);

var marker = new GMarker(center, {draggable: true});

GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});

GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("Just bouncing along...");
});

map.addOverlay(marker);
}
}

You'll notice that I added a couple variables to pass to the program that were filled in another function based on my user input from the web page.

function getCoord(itemName){

var lat;

var long;

if (itemName == 'snowbird')

{

lat = '40.5768173605448';

long = '-111.651607579098';

}

if (itemName == 'alta')

{

lat = '40.58889';

long = '-111.63722';

}

if (itemName == 'solitude')

{

lat = '40.621159';

long = '-111.592499';

}

if (itemName == 'vail')

{

lat = '39.3944';

long = '-106.2150';

}

if (itemName == 'taos')

{

lat = '36.39';

long = '-105.58';

}

if (itemName == 'kill')

{

lat = '43.6775';

long = '-72.7803';

}

setupMap(lat, long);

}

At the bottom of this function is where I call the setupMap() function. It then returns the following data/picture: