Skip to content

How to show indian state borders in google maps api?

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

enter image description here

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 !

Answer

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>

enter image description here

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