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>
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.
Leave a Reply