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