A Little Dab of Google Maps

Okay here is the situation: You are given a gigantic list of locations that must be plotted on a map. You don't have much time so you turn to Google and they kindly give you their API. You don't have time to make an XML file, which I will admit is the better way to go, but you'll do it all on the fly. So watch out this is it.

First we need to initialize some variables. These allow for us to know when we have

var start = 0
var end = 1;

In order to run this completely on the fly we will not be using an XML file like some scripts. Instead we'll just load a javascript array to hold the information. If need be you can load other arrays with information pertaining to a given location. Remember javascript does not support multi-dimensional arrays, so make sure your array indexes match.

var locations = new Array();
var locationName = new Array ();

Loading is done by using a server-side code to output the javascript array. Use whatever language that you wish. Just use a simple assignment and have the server output it. Really nothing tricky here.

locations[1] = "Cincinnati, OH";

Next we want to build our map. Google maps have tons of options and I can't cover them all here, but can show you some useful ideas. First, we want to see if your browswer is compatible, if so then we move along. Next we create a map inside of a div that we specify, in this case it is map_canvas. Then we need a way to control the map so we add some classes that allows us to show the Zoom control and which map we would like to see (Satellite, Hybrid, etc.).

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));

Then we need a way to control the map so we add some classes that allows us to show the Zoom control and which map we would like to see (Satellite, Hybrid, etc.).

    //MAP CONTROLS
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());

If you would wish to set the initial location and zoom level use the setCenter option. Currently, it loads above Kansas City, MO a decent distance back. You may also initialize the map type by setting the setMapType.

    //SET INITIAL POSITION
    map.setCenter(new GLatLng(39.11,-94.72), 4);
    map.setMapType(G_HYBRID_MAP);

Ever try and find the latitude and longitude of a certain location? Searched tons of sites or used weather.com? You don't have to anymore because Google has provided a Geocoder that will do the work for it. We'll need this so lets initialize one.

    geocoder = new GClientGeocoder();

Another cool feature is the ability to overlay images on your map. In this case we are adding a legen to the screen. Just create a new GScreenOverlay object and follow the syntax over at google.

    //Load the legend
    legend = new GScreenOverlay("legend.png", new GScreenPoint(0.415, 0.35, 'fraction', 'fraction'),
    new GScreenPoint(-475, 200),
    new GScreenSize(0,0, 'fraction', 'fraction'))
    map.addOverlay(legend);
  }
}

Now this next part you may wonder why i put the showAddress function inside a loop and then enclosed it inside the plot() function. The reason is our Geocoder sometimes does not have adequate time to return a valued to a page therefore we need a way to control the timing. Thus, the plot() function is on a setInverval command and our loop helps control the requests that are sent out.

function plot(){
	for (i=start;i<=end;i++)
	{
		showAddress(i);
	}
	start = start + 1;

	end = end + 1;
	if(end>locations.length){
		end = locations.length;
	}
}

Here we finally put our Geocoder to use. Using our array we look up the address using the Geocoder. If it is able to find the point you are looking for it continues on to set a marker. First, we create a base GIcon object and using its various classes can do fun stuff with it.

function showAddress(id) {
	
	var address = locations[id];
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              error = error + 1;
            } else {
			
	//specify the details of the icon
	var baseIcon = new GIcon();
	baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	baseIcon.iconSize = new GSize(20, 34);
	baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);
	baseIcon.infoShadowAnchor = new GPoint(18, 25);

If you would like to use your own icon that is completely ok too. Just create another GIcon object and then specify the image you would like to use.

        	
	//select the image for the icon
	var letteredIcon = new GIcon(baseIcon);
	
    letteredIcon.image = "myimage.jpg";
				
    // Set up our GMarkerOptions object
    markerOptions = { icon:letteredIcon };
    var marker = new GMarker(point, markerOptions);

Lastly, we officially add the marker to the map. Then using the openInfoWindowHtml we can let the viewer know some information about the location that we have plotted.

    
    //add marker to map
    map.addOverlay(marker);
    GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("" + locations[id] + "");
    
 		});

			  
            }
          }
        );
      }
    }