Google Maps Mashup

Everybody loves the Google Maps JavaScript API, but it can be a bit of a bear to get started with sometimes. This sample will walk you through the process of querying a Socrata dataset API with JavaScript and visualizing the results in a Google Map. If you’d like to follow along at home, you can fork this jsFiddle sample project.

This example pulls data live from this State of Connecticut directory of schools via the SODA API.

To start, we’ll build our SoQL query. Our query filters our results by the organization_type column to only Public School Districts:

// Construct the query string
url = 'https://data.ct.gov/resource/v4tt-nt9n.json?'
      + 'organization_type=Public%20School%20Districts'
      + '&$$app_token=09sIcqEhoY0teGY5rhupZGqhW';

Then we initialize our map and center it on Trenton, CT:

// Intialize our map
var center = new google.maps.LatLng(41.7656874,-72.680087);
var mapOptions = {
  zoom: 8,
  center: center
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

To retrieve our records from Socrata, we’ll use jQuery’s $.getJSON. We’ll then iterate through the records one by one by using the $.each utility function:

// Retrieve our data and plot it
$.getJSON(url, function(data, textstatus) {
      $.each(data, function(i, entry) {
        // Deal with our locations
      });
});

Finally, for each entry we’ll create a new Google Maps Marker on our map:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(entry.location_1.latitude, 
                                     entry.location_1.longitude),
    map: map,
    title: location.name
});

To finish it up, we wrap the whole thing in jQuery’s $(window).load function so that it gets run when the DOM is done loading. The full code listing is below:

$(window).load(function() {
    // Construct the query string
    url = 'https://data.ct.gov/resource/v4tt-nt9n.json?'
          + 'organization_type=Public%20School%20Districts'
          + '&$$app_token=09sIcqEhoY0teGY5rhupZGqhW';
    
    // Intialize our map
    var center = new google.maps.LatLng(41.7656874,-72.680087);
    var mapOptions = {
      zoom: 8,
      center: center
    }
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    
    // Retrieve our data and plot it
    $.getJSON(url, function(data, textstatus) {
          $.each(data, function(i, entry) {
              var marker = new google.maps.Marker({
                  position: new google.maps.LatLng(entry.location_1.coordinates[1], 
                                                   entry.location_1.coordinates[0]),
                  map: map,
                  title: location.name
              });
          });
    });
});

That’s all it takes! If you’ve got a walk-through of your own that you’d like to share, we’ll gladly accept your contribution.

2016-07-19 Update: Revised this example to use the new SODA 2.1 API for this dataset.

Google Maps Mashup

chrismetcalf

Related Posts