Highlighting borders of state and cities of US in Google Map API 3

Question

I have a scenario where I have to highlight borders and shade a state or city after geocoding it (when I got the lang and lat).

How can I do this, do I need to have a complete information of a city to surround it with polylines? Or is there a way that map API can do this for me.

Answer 1

True. Google does not provide this feature. So what we can do... we can have the lat/long of the borders of the state. And we have to draw polygons ourselves.

I used this JS object. And changed it to Google map object (google.maps.LatLng).

For example:

var statesobj = {"AK": [new google.maps.LatLng(70.0187, -141.0205),
new google.maps.LatLng(70.1292, -141.7291),
new google.maps.LatLng(70.4515, -144.8163)]}

So, it's easy now. Loop on these lat/longs. And you can draw the polygons on every state of US.

So this is the solution I came up. If you guys know some better idea to do it. Please share.

Answer 2

You can also try Google Geo Charts:

http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html

Answer 3

Google Maps API doesn't allow you to retrieve city borders. There are a couple other places from which you can get the coordinates, though:

Flickr API

There is a Flickr API based on photos that people tag, but it's only as accurate as the people who tag photos: so it's good enough for bootstrapping but probably not for production: http://karya-blog.blogspot.com/2012/12/fetching-city-polygons-with-flickr-api.html

Natural Earth Data

An accurate alternative is www.naturalearthdata.com. To get that data from there you just need to make two requests: one with the city name and one with their ID to get the parameters:

unlock.edina.ac.uk/ws/search?name=berlin&gazetteer=naturalearth&format=json

and then

unlock.edina.ac.uk/ws/footprintLookup?format=json&identifier=14126951

and you're set :)

Mapzen

If it's possible for you to pre-fetch the data, go for Mapzen, they have a full and pretty accurate database: https://mapzen.com/data/borders/

Answer 4

I'm afraid google maps API doesn't provide any means to access region (country, state, city, ...) shapes.

If you want to highlight regions you have to create custom overlays based on data acquired elsewhere.

Answer 5

Now the basic map example includes a "mashup" of data. When identifying data is fed to the web service, the resulting output can pinpoint locations on the map. It shows how a geographic Map Marker is placed on the map to identify a specific location. Map Markers can use the default icon (shown) or a custom image, gauge, or even a chart. Optionally, the map can be configured to display a Map Marker Info window, containing additional location-specific data, when the marker is clicked.

It includes data-driven, colored regions (in this case, representing postal codes) overlaid a map of eg Washington, DC. Logi Info can work with GIS boundary data to produce region overlays for states, counties, cities, school districts, and other areas. Like the Map Marker, regions can be clicked to display a pop-up information window with detail data.