Category: webdev

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.