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?
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>