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.

score 11 · Accepted Answer · answered Jul 02 '11 at 11:03

11

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.

answered Jul 02 '11 at 11:03

Tahir

3,344
14
51
69

6

Where can I retrieve the lat/long values of other countries borders? – Wolkenarchitekt May 01 '12 at 13:56
@IanDunn that only works on Google Map but if you use the api which in this case is not possible. – JohnnyQ Jul 17 '13 at 06:01

score 10 · Answer 2 · answered Aug 16 '11 at 18:11

10

You can also try Google Geo Charts:

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

answered Aug 16 '11 at 18:11

Renato

413
5
9

score 5 · Answer 3 · answered Aug 15 '15 at 08:17

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/

score 0 · Answer 4 · answered Jun 19 '11 at 00:38

0

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.

answered Jun 19 '11 at 00:38

Tomik

23,857
8
121
100

score 0 · Answer 5 · edited Oct 29 '12 at 04:23

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.

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

5 Answers5

Linked