CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3kml
Alan Cordova
Alan Cordova

Reputation: 171

My google places kml url javascript

i have a problem with my places from google maps, i already have a functionality map with a file kml in my https server, but i don't want to download and upload the map every time I make changes, not work for me only embed I need manipulated with API, so this is my code:

var map;
var src = 'MY_SERVER/points_vl.kmz';
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(20.63736, -105.22883),
    zoom: 2,
});

loadKmlLayer(src, map);
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
        };
        var circle = 'http://www.nearby.org.uk/google/circle.kml.php?radius=5miles&lat='+position.coords.latitude+'&long='+position.coords.longitude;
        loadKmlLayer(circle, map);
        map.setCenter(pos);
        setTimeout(function(){
            var infowindow = new google.maps.InfoWindow({
                map: map,
                position: pos,
                content: 'Current Location'
            });
            infowindow.setPosition(pos);
        }, 2000);
    });
}
}

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;
});

}

This work fine, but have a way for direct the kml from my url of google maps places?

Using an existant Google 'My Places' map with Maps API v3 styling this thread have some idea, but not work, if you get a idea how make it will make it wonderful

Upvotes: 0

Views: 1542

Answers (1)

geocodezip
geocodezip

Reputation: 161384

Go to your "MyMap" map. Click on the three dots next to the name of the map, click on "Export to KML":

enter image description here

Choose the "Keep data up to date with network link KML (only usable online):

enter image description here

Rename the .kmz file to .zip, then open it and open the doc.kml file it contains. That file will have the direct link to the KML data specifying your "MyMap".

Use that link in a google.maps.KmlLayer

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {
      lat: 41.876,
      lng: -87.624
    }
  });

  var ctaLayer = new google.maps.KmlLayer({
    url: 'https://www.google.com/maps/d/kml?mid=1-mpfnFjp1e5JJ1YkSBjE6ZX_d9w',
    map: map
  });
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
<div id="map"></div>
<!-- add your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>

Upvotes: 3

Related Questions