Created
August 31, 2014 10:59
-
-
Save asilbalaban/b8a034e5e0cbc2ad8f15 to your computer and use it in GitHub Desktop.
Display KML file on google maps
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>KML EXAMPLE</title> | |
| <style> | |
| #map_canvas { | |
| width: 500px; | |
| height: 400px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map_canvas"></div> | |
| <script src="https://maps.googleapis.com/maps/api/js"></script> | |
| <script> | |
| /** | |
| * @fileoverview Sample showing capturing a KML file click | |
| * and displaying the contents in a side panel instead of | |
| * an InfoWindow | |
| */ | |
| var map; | |
| var src = 'https://developers.google.com/maps/tutorials/kml/westcampus.kml'; | |
| /** | |
| * Initializes the map and calls the function that creates polylines. | |
| */ | |
| function initialize() { | |
| map = new google.maps.Map(document.getElementById('map_canvas'), { | |
| center: new google.maps.LatLng(-19.257753, 146.823688), | |
| zoom: 2, | |
| mapTypeId: google.maps.MapTypeId.TERRAIN | |
| }); | |
| loadKmlLayer(src, map); | |
| } | |
| /** | |
| * Adds a KMLLayer based on the URL passed. Clicking on a marker | |
| * results in the balloon content being loaded into the right-hand div. | |
| * @param {string} src A URL for a KML file. | |
| */ | |
| function loadKmlLayer(src, map) { | |
| var kmlLayer = new google.maps.KmlLayer(src, { | |
| suppressInfoWindows: true, | |
| preserveViewport: false, | |
| map: map | |
| }); | |
| google.maps.event.addListener(kmlLayer, 'click', function(event) { | |
| var content = event.featureData.infoWindowHtml; | |
| var testimonial = document.getElementById('capture'); | |
| testimonial.innerHTML = content; | |
| }); | |
| } | |
| google.maps.event.addDomListener(window, 'load', initialize); | |
| </script> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It was 8 year ago, i was getting route data from the KML file and show it on google maps.
I'm sure it's not working anymore.