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:

Adding a marker to a Google map

In my last post I detailed the steps of geocoding a given address to a set of coordinates. Using these coordinates you are able to map a point on a Google map and place a marker at that exact location.

The first thing we have to do is add a Google map to our web page, if you are unfamiliar with this step please refer back to my post How to add a basic Google map API to your website. Your basic Google maps code without a marker should look similar to this.




The next step in the process is to add the point to your map with a marker. Here is the code to do that.
var point = new GLatLng(42.251012,-83.625011);
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() { alert ("Hello World"); });


Code Broken Down
var point = new GLatLng(42.251012,-83.625011);
This line of code creates a variable called "point", and sets the exact point where you want to place the marker on your map

var marker = new GMarker(point);
Here you are creating a variable called "marker", and then preparing google maps to use the coordinates of your "point" in this marker

map.addOverlay(marker);
This adds the actual marker to the map

GEvent.addListener(marker, "click", function() { alert ("Hello World"); });
As an added bonus, you can add an onclick event handler to the marker and call a function that displays an alert

You can find the final product here, don't foget to click the marker :)

This is a very basic way of adding a point to a Google map, there are many ways to utilize markers into your website. Yelp uses markers to mark business locations, this website uses markers to dynamically show the coordinates of your selected point of the map. I look forward to seeing your creativity at work.

Enjoy!!