Google Maps API + Google Maps Engine / My Maps

Question

I've used Google Maps Engine to embed customized maps with layers and shapes into my web page, but it is going to be discontinued, and the replacement is Google My Maps, which is lightweight, but seems to serve my needs.

Now to my question. I am using Google Maps API to display a map on my web page, and I also have the embed code for a map from My Maps, and I want to combine them. So I want to load Google Maps API and display whatever area I like, adding markers and everything, and then on top of that (or under that) display the layers and shapes from a specific map in My Maps.

Like I said, I have the embed code, which works on its own, and the mapId is in the format "abcdefgh.abcdefgh".

Now, looking in the Google Maps API, there is a (deprecated) "MapsEngineLayer" function to load a specific Maps Engine Layer by ID, but there is no way to find out a specific layer ID in My Maps that I have found, plus I want all the layers of one mapID, but that function requires a layerId or LayerKey.

So, is there a way to include a map from "my maps" into the normal display from the Google Maps API?

Answer 1

You may also download such a map as KML, the download-URL is something like

https://www.google.com/maps/d/kml?mid=themymaps.mapid

It's not documented, but currently it works for me when I use this URL to create a KmlLayer(it should work as long they didn't modify the download-procedure).

Example(original map)

function initialize() {

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 0,
      center: new google.maps.LatLng(0, 0)
    }),

    myMapsId = 'z4jtZiEBVczE.kp_M0KHEIung';
  new google.maps
    .KmlLayer({
      map: map,
      url: 'https://www.google.com/maps/d/kml?mid=' + myMapsId
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

  html,
  body,
  #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>