3

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?

Improve this question

1 Answer 1

Reset to default
3

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>
Improve this answer
1
  • Thanks for answering this 18-months-old question :) I won't have time to test this any time soon, but I'll hope this works and accept it :)
    – bers
    Aug 27, 2019 at 17:49

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.