谷歌地图中方向和星级的信息窗口

Question

我尝试将infoWindow添加到标记中，标记应位于地图的左侧。我想谷歌地图像这样附加图像

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

您附加的图片来自Embed API，而不是JavaScript API。如果您只需要一个标记和infowindow，如图所示，那么嵌入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，则需要添加代码以将所有所需内容放入infoWindow中。但是，嵌入API可以自动输入地名，地址，评级，路线等。

我希望这有帮助！