带有标题的标记，用于Google Maps iframe和坐标

如何解决带有标题的标记，用于Google Maps iframe和坐标

我想使用iframe和所需位置的坐标将Google地图嵌入到我的网站中。我发现了两种方法。一个需要一个API密钥。一个没有。但是，没有一个允许我在标记上设置名称/标题。基本上，它只是事物中间的一个普通标记，没有任何有用的信息。

使用API​​密钥，我尝试了

<iframe
                    width="100%"
                    height="400"
                    frameborder="0"
                    scrolling="no"
                    marginheight="0"
                    marginwidth="0"
                    src="https://www.google.com/maps/embed/v1/place?key=<MY_KEY>&q=50.068842,8.645633&zoom=15">
                </iframe>

结果：

没有API密钥：

<iframe
                    width="100%"
                    height="400"
                    frameborder="0"
                    scrolling="no"
                    marginheight="0"
                    marginwidth="0"
                    src="https://maps.google.com/maps?q=50.068842,8.645633&hl=en-US&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed">
                </iframe>

它看起来像这样：

有没有办法显示标记位置的位置称为Deutsche Bank Park？

否则，对于普通用户来说，它看起来并没有太大用处。

解决方法

尝试使用此代码段。您只能使用HTML添加多个标记，只需遵循以下语法即可。您还可以根据需要使用CSS设置信息窗口的样式。

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;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

<div id="map"></div>

<div class="infowindows">
  <div class="infowindow" data-lat="-25.363" data-lng="131.044">
    <div class="infowindow__content">
      <p>You can set simple HTML here and it will goes to the marker</p>
    </div>
  </div>
</div>

如果要隐藏API密钥，则应在BE中将其保密。 但是，我认为这不再是必须的，因为您可以将密钥限制为用于特定的URL，这意味着没有人可以将其用于其网站。

,

如果Google Maps知道该地点，则可以在查询字符串中使用该地点名称（德意志银行公园）：

<iframe 
    width="100%" 
    height="400" 
    frameborder="0" 
    scrolling="no" 
    marginheight="0" 
    marginwidth="0" 
    src="https://maps.google.com/maps?q=Deutsche Bank Park&hl=en-US&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed">
</iframe>

proof of concept fiddle