Center for REALTOR® Technology Web Log

Before I begin, I want to recognize Chris McKeever for the support and inspiration behind this series. Chris’s website was widely recognized for its early Google Earth and Google API implementations in Real Estate.

I would also like to point out that the code I’m presenting is simply manipulation of the SAMPLE code provided by Google using information from the published API.

We will now look at the Google Map API in detail. Let’s modify the SAMPLE code you obtained from the registration process and plot a map of the showing the NAR Headquarter here in Chicago. The geocode for our building has a Longitude of -87.624223 and a Latitude of 41.889923.

Here is the part of the SAMPLE that we will be modifying:

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

The first function to change is centerAndZoom. It contains the geocoding and the “zoom� level and should be located with the NAR building at the center of the map. Change the code to look like this:

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-87.624223, 41.889923), 6);

You will notice that the page now shows a map of Downtown Chicago that is centered on our building. Next, let’s add a “pinâ€? showing the address exactly and use the fancier “zoom and pan” control. A pin is called a marker. I also will use a different control on the map. Change the code to look like this:

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.centerAndZoom(new GPoint(-87.624223, 41.889923), 6);
var point = new GPoint(-87.624223, 41.889923);
var marker = new GMarker(point);
map.addOverlay(marker);

Next, we will put a “pop-up” area on the pin that appears when you click on the pin. This is called an overlay. This is accomplished by creating a function (in this case createMarker) to create the marker. Notice that the new function has a listener for the key click.Change the code to look like this:

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.centerAndZoom(new GPoint(-87.624223, 41.889923), 6);

function createMarker(point, name, address)
{
var marker = new GMarker(point);

var html = "<b>" + name + "</b><br />" + address;
GEvent.addListener(marker, "click", function()
{
marker.openInfoWindowHtml(html);
});

return marker;
}

var point = new GPoint(-87.624223, 41.889923);
var marker = createMarker(point, "NAR", "430 N. Michigan");
map.addOverlay(marker);

Consumers really like to look at either maps or satellite images of the property, so let’s add those. This is done with the GMapTypeControl. Change you code to look like this:

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-87.624223, 41.889923), 6);

function createMarker(point, name, address)
{
var marker = new GMarker(point);

var html = "<b>" + name + "</b><br />" + address;
GEvent.addListener(marker, "click", function()
{
marker.openInfoWindowHtml(html);
});

return marker;
}

var point = new GPoint(-87.624223, 41.889923);
var marker = createMarker(point, "NAR", "430 N. Michigan");
map.addOverlay(marker);

Well, that is enough for this part of the series. I hope you are having fun so far.