How to open KML File in Google Maps

The following example will demonstrate to you how to open kml file in google maps. Keep reading on How to draw a circle on Google Maps, Google Maps Distance Matrix API Example C#.

What is a KML File?

KML (Keyhole Markup Language) is an XML-based language intended for managing the display of 3D geographic data. It contains structured geographic data, such as points, lines, areas, which can be displayed on Internet-based 2D and 3D maps (Google Maps, Google Earth, etc.). KML is an open format supported by most advanced GIS programs.

How to open a kml file in Google Maps

To display a kml file on google maps you need to serve your files on a public IP location so that you can access this by entering a URL in your browser. Some of my recommended techniques are:-

Create a folder and mark it for public access.
Use the Upload link to upload your KML files into this folder without conversion and shared with the world.
Go to the Download link, copy it, and paste it into the Google Maps search box.

Find the below source code:

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <title>open a kml file in google maps</title>
    <style>
        /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
        #map {
            height: 570px;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <%-- <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOURE_KEY&callback=initMap"></script>--%>
    <script>
        var map;
        function initMap() {
            var mapOptions = {
                zoom: 9, // google maps api zoom                                   
                center: new google.maps.LatLng(-19.257753, 146.823688), // latitude and longitude map
                mapTypeId: google.maps.MapTypeId.ROADMAP   // google maps types | ROADMAP, TERRAIN & SATELLITE
            };
            map = new google.maps.Map(document.getElementById('map'), mapOptions);

            var ctaLayer = new google.maps.KmlLayer({
                url: 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml',
                map: map
            });
        }
        function RemovectaLayer() {
            if (ctaLayer) {
                ctaLayer.setMap(null);
                ctaLayer = null;
            }
        }
    </script>
</head>
<body onload="initMap();">    
        <h1>open KML File in Google Maps</h1>
        <div>
            <div id="map"></div>
        </div>    
</body>
</html>

Download Source Code

Conclusion

I hope you liked this article on open a kml file in google maps. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.