Working with Google Maps

05 Sep 2010 - webdev maps deprecated

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 locater 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 formula 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 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. I could loop through each of them and plot points on the map quite painlessly.

function markOnMap (x, y) {
    geocoder = new google.maps.Geocoder ();
    //center the map to the coordinates of the searched address
    latlng = new google.maps.LatLng (x, y);
    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,
        });
        google.maps.event.addListener (marker[i], 'click', function () {
            infowind = new google.maps.InfoWindow ({ content: this.content });
            infowind.open (map, this);
        });
        i++;
    });
}

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.