Working with Google Maps

There used to be a time when there was this huge maps craze, it has since passed, but Google Maps remains the most recognized map applications seen on the internet.  Recently, I worked on Google Maps API for a client.  This post is a retrospect look at how it went.  I’ve not worked with other map systems, so I cannot compare my experience.

My task at hand was to create a store locator that would take an address as input and plot all the points on a map that was within 100 miles of the given location.  A fairly simple map application, except I decided to innovate.  My first stop was the articles page on the Google Maps API Reference page.  I found a very handy tutorial which was exactly about creating a store, wow that made my work much easier.  What I found very helpful from that tutorial was the formula.  this formula.

SELECT id, ( 3959 * acos( cos( radians(37) ) * cos( radians( lat ) ) * cos( radians( lng ) – radians(-122) ) + sin( radians(37) ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < 25 ORDER BY distance LIMIT 0 , 20;

That is the heart of the entire module.  That forumla returns coordinates that are within 25 miles of a point with coordinates (37, -122).  The complexity (if at all) of the application is to pass data from a database using PHP or other server-side language and passing into a javascript function.  The tutorial that I was looking at used xml to pass data to the javascript function.  This of course is nice, but I was a bit lazy and a bit innovative.

In my quest for something better, I discovered JSON.  Now, this seemed simple enough since is 2010 and most languages have JSON support including PHP.  So, I put all the the results into a hidden textbox as JSON and wrote a javascript function that would execute on window load.  Using that information, I could then loop through it and mark points on the map from that.

jQuery being an awesome library provided a means for me to do exactly that.  Icould loop through each of them and plot points on the map quite painlessly.

function markOnMap(x, y) {
    geocoder = new google.maps.Geocoder();
    latlng = new google.maps.LatLng(x, y);  //center the map to the coordinates of the searched address
    var myOptions = {
        center: latlng,
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var markers = document.getElementById('marker').value;
    var mapPoints = $.parseJSON(markers);
    var marker = new Array();
    i = 0;
    $.each(mapPoints, function() {
        var latlng = new google.maps.LatLng(this.lat, this.lng);
        marker[i] = new google.maps.Marker({
                    map: map,
                    draggable: true,
                    position: latlng,
                    content: '<b>Name : </b>' + this.name, //very important
              });
    google.maps.event.addListener(marker[i], 'click', function() {
        infowind = new google.maps.InfoWindow({
            content: this.content,
            });
        infowind.open(map, this);
        });
    i++;
    });
}

(WordPress seems to gobble up the indenting, so if you want the code, its on pastebin.com)

When using infowindows, its very important that the content is stored inside the marker and then used to pop out the infowindow, that’s the only way that works.  I spend about 5 hours trying to figure that one out.