Working with Ubuntu

Working with Google Maps

Posted in Web by nigelbabu on September 5, 2010

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.

About these ads

2 Responses

Subscribe to comments with RSS.

  1. MOHAMMAD SALMAN said, on December 13, 2010 at 4:12 pm

    Hi , Nigel very thanks for this post..
    But I have a question
    I need to implement the store search on the radius search like within the 15 MILES.
    So that the map returns multiples location within the selected radius
    How can i implement , beacause i just send the request to the google server for the geocoing purpose

    • nigelbabu said, on January 7, 2011 at 11:43 am

      What I developed does almost exactly that. You just need to change the search radius.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: