How to show district/state of country on google ma

问题:

How can we achieve highlighted state border according to a specific country in Angular JS, for example if we choose India then we need to show all its state with highlighted border. In our case we want to achieve it for "Rwanda" country where we can show its state like what has been shown in this image,

回答1:

Unfortunately, Google Maps JavaScript API doesn't expose the boundaries of geographic features. There is very old (10 years) feature request in the public issue tracker, but it looks like Google doesn't set priority on this task:

https://issuetracker.google.com/issues/35816953

You should use data from third party sources in order to show boundaries of states and districts. One option is using GeoJSON information provided by Open Street Maps. I would suggest reading the following answer that explains how to download GeoJSON data from OSM:

https://stackoverflow.com/a/40172098/5140781

I just did a quick test and downloaded simplified boundaries GeoJSON for Rwanda states (East Province, Northern Province, Southern Province, Western Province and Kigali City). You can download detailed polygons of course. After that I just used a sample code as described in data layer documentation:

https://developers.google.com/maps/documentation/javascript/examples/layer-data-simple

and loaded my sample GeoJSON file (http://aux.xomena.elementfx.com/sosamples/rwanda_states.json). The result is shown in the screenshot

You can also run the sample code at http://aux.xomena.elementfx.com/sosamples/rwanda_states.html

I hope it helps!