嵌入式谷歌地图在悬停时显示错误的公司答案

【问题标题】：Embedded Google Maps shows wrong company on hover嵌入式谷歌地图在悬停时显示错误的公司
【发布时间】：2015-11-25 10:07:31
【问题描述】：

我在使用 Google 地图时遇到了一个非常烦人的问题。当我为我的公司嵌入 Google 地图时，当我将标签悬停在地图上时，它会在白色弹出窗口中显示另一家不相关的公司。当我点击我的公司标签（地图上的红色公司名称）时，它会将左上角白框中的地址切换到该公司，但不会移动地图指针。

起初，当我的公司名称略有不同时，另一家公司是印度的一家公司，名称相似，也是一家网页设计机构。与此同时，我稍微更改了 Google Places 中显示的公司名称。现在谷歌地图已经采用了这个变化，问题仍然存在。只是这次是显示另一家公司，在英国，也是一个网页设计机构，名字不一样。

为了进一步澄清我的问题，我附上了屏幕截图。

我将鼠标悬停在我的公司标签上，白色弹出框显示不相关的公司名称。（截图 1）
我点击“我的公司标签”（屏幕截图 1）
视图更改为屏幕截图 2 中的视图。

请注意，仅当嵌入 Google 地图并设置为指向我的公司时才会出现此问题。

我已经在两周前向 Google 报告了这个问题，但我还没有收到任何回复。

Screenshot 1 (The state when hovering my company label)

Screenshot 2 (The state when company label has been clicked)

我知道 stackoverflow 不是 Google 的客户服务，但我想知道其他人是否也遇到过这个问题。如果问题只是一个错误，我只需要等待修复，我想知道是否有人对此有解决方法，因为当您悬停我的公司时，谷歌地图显示另一家公司非常尴尬。特别是因为另一家公司也从事网页设计业务。

【问题讨论】：

等一下。您需要一个包含 1 个标记的嵌入式地图，并带有一个信息窗口。对？那么您就不需要 Google 地方信息了。做这样的事情：developers.google.com/maps/documentation/javascript/examples/…
我只想使用谷歌地图提供的嵌入代码。它工作正常，除了我描述的奇怪的“错误”。
生成这些图片的代码是什么样的？

标签： google-maps

【解决方案1】：

发生了什么：您的代码要求 google 搜索您的公司……但出了点问题。

如果您只有 1 个标记，显然您（程序员）会搜索该位置（1 次），然后将其放入您的代码中。那你就再也见不到那家印度公司了。

这是一个地图、标记和信息窗口的简单示例。

这是你想要的吗？你能从这里拿走吗？缺少什么功能？

编辑：哦，是的...我在第 31 行使用了“点击”。您可以通过“鼠标悬停”更改“点击”；然后在悬停时显示信息窗口。

<script src="https://maps.googleapis.com/maps/api/js?"></script>
<script type="text/javascript">
  // making the map.  Initialization
  function initialize() { 
    // company location: 
    var companyLocation = {lat: 52.0400564, lng: 4.3483506};
    // company logo: 
    var urlCompanyLogo = 'https://lh3.googleusercontent.com/-ON8pWapB8Ro/AAAAAAAAAAI/AAAAAAAAAGo/wiwqSbfDyxg/s60-p-rw-no/photo.jpg';
    // content of the infowindow
    var companyDetails = '  <img class="logo" src="' + urlCompanyLogo + '"> <h3>Kermit industries</h3> Retrieving any golf ball from the pond';

    // the map
    var map = new google.maps.Map(document.getElementById('map'), {
      center: companyLocation,
      mapTypeId: google.maps.MapTypeId.HYBRID,
      zoom: 18
    });
    // the marker
    var marker = new google.maps.Marker({
      position: companyLocation,
      map: map,
      title: 'Kermit industries'
    });
    // the infowindow
    var infowindow = new google.maps.InfoWindow({
      content: companyDetails,
      position: companyLocation,
      map: null  // first set it to null, only show it after a click on the marker
    });
    // when the user clicks on the marker, the infowindow will appear
    marker.addListener('click', function() {
      infowindow.setMap(map);
    });
  }
  // this will lauch the initialization once the page is loaded
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
  #map {
    height: 500px;
  }
  .gm-style-iw .logo{
    float: right;
  }
</style>
<div id="map"></div>

【讨论】：