Marker with title for Google Maps iframe and coordinates

Question

I want to embed Google maps on my website using iframe and the coordinates of the desired location. I found two ways of doing this. One requires an API key. One doesn't. However, none of them allowed me to set a name / title on the marker. It's basically just a plain marker in the middle of something, without any useful information.

With API key, I tried this

The result:

Without API key:

And it looks like this:

Is there any way to show that the place at the marker's location is called Deutsche Bank Park?

Otherwise, it doesn't really looks like it's of much use for the regular user.

user_13433096 · Answer

Try with this snippet. You can add multiple markers only with HTML, just follow the syntax. You can also style with CSS the infowindow as you please.

function initMap() {
  const uluru = {lat: -25.363, lng: 131.044};
  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  
  const infos = document.querySelectorAll('.infowindow');
  
  infos.forEach(info => {
    const content = info.innerHTML;
    const lat = info.getAttribute('data-lat');
    const lng = info.getAttribute('data-lng');

    const infowindow = new google.maps.InfoWindow({
      content
    });
    
    const marker = new google.maps.Marker({
      position: uluru,
      map
    });

    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
  });
}

initMap();

#map {
  width: 100%;
  height: 200px;
}

.infowindows {
  display: none;
}

.infowindow__content {
  max-width: 100px;
}






  
    
      You can set simple HTML here and it will goes to the marker

If you want to hide your API Key you should keep it as secret in BE. But, I don't think that this is necessary anymore as you can restrict the key to be used for specific URLs, which means that no one can use it for its website.

user_1210329 · Answer

If Google Maps knows about the place, you can use that place name (Deutsche Bank Park) in the query string:

proof of concept fiddle

Marker with title for Google Maps iframe and coordinates

2 Answers