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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.