Athenites Part 2 - Google maps API v3

screenshot

Currently, the Google maps that get loaded into each venue's page are from the iFrame embed code that Google provides with any map search. In order to make a page that would show all the venues at once, I had to delve a little deeper. I checked out a couple tutorials, but it turns out that most of the ones I could find were dealing with v2 of the API. I decided to do it right and go with the new v3 API and also to load the markers from a JSON file.

To get started I created a new div, called "mapdiv", to load the map into. I also called the javascript from the Google map server.


<div id="mapdiv"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false"
 type="text/javascript"></script>


Of course, I need jQuery too, but that's already loaded. Notice the relative shortness of the Google code URL - starting with v3, they no longer require a API key to use the API. Nice.

The rest of the work was in the javascript, which took me a while to figure out. Google's own documentation for the v3 API is excellent, but sometimes I'm a little slow. Anyway let's take a look at the code. I'll break it into small pieces and explain each part.



<script type="text/javascript">

function initialize() {
  var myLatlng = new google.maps.LatLng(33.9592,-83.3792);
  var myOptions = {
     zoom: 16,
     center: myLatlng,
     mapTypeControl: true,
     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
     navigationControl: true,
     navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     };

  var map = new google.maps.Map(document.getElementById("mapdiv"), myOptions);


This first part sets up the map and loads it into my mapdiv. There are several options to set. The Latlng is the latitude and longitude of the center of the map. The zoom sets how detailed the map will be. There are several Control options - I chose the dropdown menu for the map type control and the small navigation controls to conserve screen real estate.

Next comes the tricky part, loading the data from the JSON (JavaScript Object Notation) file. Before we return to the script, here's a quick look at the JSON structure. A JSON file is basically an Object that contains an array of Objects. Here is one of the Objects:


    {"lati":"33.957902",
     "long":"-83.3796",
     "title":"Caledonia Lounge",
     "address":"256 W. Clayton Street",
     "html":"<p>Small music hall booking the best local and touring
 underground bands.</p><p><a href='1'>More info</a></p>"
    }


One of JSON's virtues is that it is readable by both humans and machines. Human's can read it easily if a generous amount of carriage returns are used, and machines can read it if every last blooming punctuation mark is right - leave out a comma or quotation mark and you're screwed!

Onward to the script:



  var url = "/sites/all/themes/bars/markers.json";
  $.getJSON(url,
    function(data){	
          $.each(data.markers, function(i,markers){

              var mylati = data.markers[i].lati;
              var mylong = data.markers[i].long;
              var mytitle = data.markers[i].title;
              var myaddress = data.markers[i].address;
              var myhtml = data.markers[i].html;

var mycontent = "<div class='infowin'><h3>" + mytitle + "</h3>" + "<h4>"
+ myaddress + "</h4>" + myhtml + "</div>";

var myLatlng = new google.maps.LatLng(parseFloat(mylati),parseFloat(mylong));

var infowindow = new google.maps.InfoWindow({
        content: mycontent
    });

var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: mytitle
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });

   });
});

}

initialize();


JQuery's $.getJSON function loads the JSON file and jQuerys $.each function processes each object in it. The values from each object are loaded into some variables and some of those are assembled into the the mycontent variable.

Then the MyLatlng variable calls for a new map object from google.maps. Notice the parseFloat wrappers on my variables. Without this it was throwing NaN errors.

The the infowindow variable asks for a new InfoWindow from google.maps and loads the mycontents variable into it.

Next the marker variable asks for a new Marker and places it on the map. Finally an event listener is added to the marker that calls for a click on it to open the InfoWindow. These steps are repeated for each object in the JSON file.

Note the initialize() function called at the end. This executes the first line of my script and ensures that the whole function is loaded before it starts.

As a result of adding this map, I had to re-organize the home page of Athenites. Now it looks like this: