Google Maps with KML
The Google Maps JavaScript API makes it easy to pull in geospatial data from KML files, which works great with our KML export functionality for geospatial datasets. This sample will walk you through the process of using Socrata’s KML support to display polygon boundaries on a Google Map. If you’d like to follow along at home, you can fork this jsFiddle sample project.
This example would go great with our Google Maps Mashup tutorial, allowing you to map points and boundaries together.
This example pulls data live from this LA Comptroller dataset of district boundaries.
To start, we’ll need our KML URL. We got this by right-clicking and selecting “Copy Link Address” on the KML link in the Export sidebar: post
// Our KML URL, grabbed from "Export"
var kml_url = "https://controllerdata.lacity.org/api/geospatial/3mvs-psab?method=export&format=KML"; Then we initialize our map and center it on Los Angeles:
// Initialize our map
var center = new google.maps.LatLng(4.0204989,-118.4117325);
var mapOptions = {
zoom: 8,
center: center
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);Then we’ll add our KML layer:
// Add our KML boundaries
var laBoundaries = new google.maps.KmlLayer({
url: kml_url,
map: map
});The whole thing then get’s wrapped 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() {
// Our KML URL, grabbed from "Export"
var kml_url = "https://controllerdata.lacity.org/api/geospatial/3mvs-psab?method=export&format=KML";
// Intialize our map
var center = new google.maps.LatLng(4.0204989,-118.4117325);
var mapOptions = {
zoom: 8,
center: center
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Add our KML boundaries
var laBoundaries = new google.maps.KmlLayer({
url: kml_url,
map: map
});
});There you go! If you’ve got a walk-through of your own that you’d like to share, we’ll gladly accept your contribution.