4

When I created a custom My Maps and by default, Google allow you to share via iframe approach.

However, this is very slow and I want to render using JS API instead.

What is the simplest method to do so?

1 Answer 1

6

One option is to use the "Exported KML" from custom My Maps to render the data on a Google Maps Javascript API v3 KmlLayer.

Description of how to get the KML link from MyMaps in my answer here

code snippet: (data from this MyMap)

var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var layer = new google.maps.KmlLayer({
    // url: "http://www.google.com/maps/d/kml?mid=zNPjLbo835mE.k3TvWfqGG-AU",
    url: "http://www.google.com/maps/d/kml?forcekml=1&mid=1-mpfnFjp1e5JJ1YkSBjE6ZX_d9w",
    map: map
  })

}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.