How to show indian state borders in google maps api?

Question

I am looking to develop a google map which clearly shows state boundaries of Indian states, something like

It clearly shows the state boundaries of Indian states, any idea how to do it? I found a lot but did not get satisfactory results any help will be really appreciated !

Too broad + your question has been asked so many times here already. — MrUpsidown, Jul 30 '18 at 09:43
Duplicate of https://stackoverflow.com/questions/10874686/google-maps-v3-draw-german-state-polygons — MrUpsidown, Jul 30 '18 at 09:45
Duplicate of https://stackoverflow.com/questions/1814169/geographical-boundaries-of-states-provinces-google-maps-polygon — MrUpsidown, Jul 30 '18 at 09:45
Duplicate of https://stackoverflow.com/questions/3544041/google-maps-with-counties-overlay — MrUpsidown, Jul 30 '18 at 09:46

score 3 · Accepted Answer · edited May 21 '21 at 00:41

You can use loading KML file on google map. Here is the link to KML file for all Indian districts. https://sites.google.com/site/indiadistrictmap/home/kml https://sites.google.com/site/indiadistrictmap/home/kml/doc.kml

Here is the link to KML for states border only https://community.qlik.com/cyjdu72974/attachments/cyjdu72974/new-to-qlik-sense/77834/1/India-States.kml

   function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: {lat: 28.667957, lng: 77.166449}
    });


    var ctaLayer = new google.maps.KmlLayer({
        url: 'https://sites.google.com/site/indiadistrictmap/home/kml/doc.kml',
        map: map
    });
}

For Local loading of KML file, you need to use geoXML3 library.

<script src="geoxml3/kmz/geoxml3.js"></script>
<script>

    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5,
            center: {lat: 28.667957, lng: 77.166449}
        });

        var myParser = new geoXML3.parser({map: map});


        var ctaLayer = new google.maps.KmlLayer({
            url: myParser.parse('assets/doc.kml'),
            map: map
        });
    }
</script>

View demo on jsfiddle : https://jsfiddle.net/pxr5g264/3/

score 0 · Answer 2 · answered Jul 30 '18 at 20:18

For each state, you need a set of Lat Long coordinates to create a polygon (there are probably Indian government sources for this). Then you need to create a KML file containing these coordinate sets (see https://developers.google.com/kml/documentation/). Then you submit the file to the Google Maps API as a KML layer (see https://developers.google.com/maps/documentation/javascript/examples/layer-kml).

Alternately, you can create a Fusion Table (see https://support.google.com/fusiontables/answer/2571232?hl=en). You can see how that would work for the USA here https://fusiontables.google.com/data?docid=1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa#map:id=2.

How to show indian state borders in google maps api?

2 Answers2