在 google 地图中包含方向和星级的信息 Window

Question

我正在尝试将信息窗口添加到标记，标记应该在地图的左侧。我想要 google 这样的地图附上图片

google 地图的当前代码：

<script>
      function initMap() {
        var uluru = {lat:<?= $location['lat'];?>,  lng: <?= $location['lng'];?>};
        var map = new google.maps.Map(document.getElementById('gmap_canvas'), {
          zoom: 14,
          center: uluru
        });

        var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h4 id="firstHeading" class="firstHeading">Venue</h4>'+
            '<div id="bodyContent">'+
            '<p><a><?= $location['address'];?></a></p>'+
            '</div>'+
            '</div>';

        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });

        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
      }
    </script>

Answer 1

您附加的图像来自嵌入 API，而不是 JavaScript API。如果您只需要一个标记和如图所示的信息窗口，那么嵌入 API 可能更适合您。请在此处查看我们的文档：

https://developers.google.com/maps/documentation/embed/guide

获得与您发布的图像完全一样的嵌入地图所需的代码是：

<iframe

  width="600"

  height="450"

  frameborder="0" style="border:0"

  src="https://www.google.com/maps/embed/v1/place?key=MY_API_KEY
&q=Hotel+Sahara+star" allowfullscreen>
</iframe>

注意：为了安全起见，我已经编辑了我的 API 密钥。如果您将自己的代码输入到此代码中，您将得到一张看起来像您的图片的地图。

如果您希望使用 javaScript API，您将需要添加代码以将所有需要的内容放入信息窗口。嵌入API，但是，可以自动把地名，地址，评分，路线等等

希望对您有所帮助！

在 google 地图中包含方向和星级的信息 Window

Info Window with direction and star rating in google map

google-maps

google-maps-api-3

infowindow

direction