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!!