javascript - Google Maps with counties overlay?

Question

I have no experience working with Google Maps, but I'd like to embed a "Choose your county" map in my webapp. My app only targets California, so it only needs to support one state, but I can't find any easy way to do this (without manually drawing overlay polygons for all the county lines).

I assumed I'd easily be able to find examples of "Choose your county"-style interfaces on Google somehow, but the only thing I found was this -- http://maps.huge.info/county.htm -- and I'm leaning towards hitting their API to pull the geometry for the whole state if I can't find a better option.

Does anyone have any experience or insight to help make this a little easier?

Answer 1

The Google Maps API does not provide county polygons, or any other predefined borders of states or countries. Therefore the main issue here is obtaining the polygon data.

A polygon on the Google Maps API is defined by constructing an array of LatLng objects (assuming you're using the v3 API):

var bermudaTriangleCoords = [
  new google.maps.LatLng(25.774252, -80.190262),
  new google.maps.LatLng(18.466465, -66.118292),
  new google.maps.LatLng(32.321384, -64.757370),
  new google.maps.LatLng(25.774252, -80.190262)
];    

Then you would use this array to construct a Polygon object:

var bermudaTriangle = new google.maps.Polygon({
  paths: bermudaTriangleCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35
});

And finally show it on the map by calling the setMap() method:

bermudaTriangle.setMap(map);    // Assuming map is your google.maps.Map object

If you keep a reference to your Polygon object, you can also hide it by passing null to the setMap() method:

bermudaTriangle.setMap(null); 

Therefore you could consider building a JavaScript object with a property name for each county. This will allow you to fetch the polygon objects from the name of the counties in O(1) (constant time), without having to iterate through all the collection. Consider the following example:

// Let's start with an empty object:
var counties = {    
};

// Now let's add a county polygon:
counties['Alameda'] = new google.maps.Polygon({
  paths: [
    // This is not real data:
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.757370),
    new google.maps.LatLng(25.774252, -80.190262)
    // ...
  ],
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.3
});

// Next county:
counties['Alpine'] = new google.maps.Polygon({
  // Same stuff
});

// And so on...

The counties object will be our data store. When a user searches for "El Dorado" you can simply show the polygon as follows:

counties['El Dorado'].setMap(map);

If you keep a reference to the previously searched county, you can also call setMap(null) to hide the previous polygon:

var userInput = 'El Dorado';
var latestSearch = null;

// Check if the county exists in our data store:
if (counties.hasOwnProperty(userInput)) {
  // It does - So hide the previous polygon if there was one:
  if (latestSearch) {
    latestSearch.setMap(null);
  }
  // Show the polygon for the searched county:
  latestSearch = counties[userInput].setMap(map);
}
else {
  alert('Error: The ' + userInput + ' county was not found');
}

I hope this gets you going in the right direction.