Render a My Maps using Google Maps JavaScript API

Question

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

Answer 1

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
}