Google My Maps – How to Embed as Styled Maps

google mapsgoogle-my-maps

I feel this should be easy, but I do not get it. I have found two ways to embed a Google Map into a website:

  1. Go to Google Maps, click "Share or embed map", "Embed map", and you get something like this:

<iframe src="https://www.google.com/maps/embed?pb=..." width="..." height="..." frameborder="0" style="border:0" allowfullscreen></iframe>

This also works very similarly for Google My Maps, giving something like this:

<iframe src="https://www.google.com/maps/d/embed?mid=..." width="..." height="..."></iframe>

  1. With the Google Maps JavaScript API, e.g., using the procedure outlined to Start Styling your Map. This gives much flexibility – for example, business can be hidden, water can be shown in red, stuff like that. One uses something like this:

<script>
function initMap() {
// Styles a map in night mode.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.674, lng: -73.945},
zoom: 12,
...
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>

So in one case I use the URL parameters to configure the map, in the other, a JSON object. But what are the available options? Can I style a "My Map", and how do I enter the "My Map" into the JSON object?

Best Answer

Use the code below (replace your my maps ID and your API key)

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Embedded Map</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
    <script>
var map;
var infowindow;
function initialize() {
  var mapOptions = {gestureHandling: 'cooperative'}

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


  var mapLayer = new google.maps.KmlLayer({
    url: "https://www.google.com/maps/d/kml?mid=YOUR_MY_MAPS_ID"  });
  mapLayer.setMap(map);

}

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

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>
Related Topic