Google Maps and a Widget Builder

We saw in an earlier post some of the work I’d done to create the widget for Kyero, now we needed a way for the users to build the widget themselves (initially just selecting locations), here begins my adventures into the Google Maps API v3.

This is actually live now (or should be by the time I publish this post), so I’m not going to go into the details of how the dropdowns work, suffice to say they use AJAX to fetch a list of municipalities in each province. When a municipality is selected we have all the boundaries stored in our database such that we can use the Google Maps API to draw a polygon around it!

First, let’s set up our map, in our onload function:

  var mapDiv = document.getElementById('map');
  var latlng = new google.maps.LatLng(40.4135, -3.8232); // Centre of Spain
  var options = {
        center: latlng,
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(mapDiv, options);

That gets us a nice big (defined by css) map on the page.

All we now need to do is when the municipality is changed is draw around it, and because the nice guys at Kyero return me a perfect GeoJSON object that’s really really easy:

$("#municipality").change(function(){
    $.getJSON('http://server/?municipality='+slug, function(data) {
       map.data.addGeoJson(data);
    });
});

If we’re adding this GeoJSON data as a polygon onto the Google Maps we’ll want a nice clean way to remove it as well:

function clearMap() {
   map.data.forEach(function(feature) {
      map.data.remove(feature);
   });
}

We did a lot more like detecting clicks on the map, going off to locate which municipality that was before drawing the data layer as above as well (and keeping the select boxes in sync with what we were doing on the map!), but there is one last thing I’ll leave here.

When you’ve draw this polygon you’ll want to centre it in the map frame, I started off arbitrarily setting the zoom, sometimes we were lucky and it was about right and others it was so far off it was funny (municipalities in Spain come in all sorts of different shapes and sizes!), this little function is great for finding all the positions you’ve just plotted and zooming the map to fit them all in

map.data.addListener('addfeature', function(e) {
  var bounds = new google.maps.LatLngBounds();
  processPoints(e.feature.getGeometry(), bounds.extend, bounds);
  map.fitBounds(bounds);
});

function processPoints(geometry, callback, thisArg) {
  if (geometry instanceof google.maps.LatLng) {
     callback.call(thisArg, geometry);
  } else if (geometry instanceof google.maps.Data.Point) {
     callback.call(thisArg, geometry.get());
  } else {
     geometry.getArray().forEach(function(g) {
        processPoints(g, callback, thisArg);
     });
  }
}

Happy Mapping!