Question

我是新来的，我是Google Maps API或任何API的完整新手！我已经成功地将一些东西拼凑在一起但是请耐心等待我。

我已经加载了我的基本地图，在商家（地点）上放置了一个标记我正在处理我的 infowindow 填充从Places API中提取的相关业务详细信息。单击标记时，将显示 infowindow 并显示内容。到目前为止，这么好了

现在我希望 infowindow 在地图加载时自动显示。我有这个工作，但出现的 infowindow 是空的......只是出现一个X关闭的小气泡。如果我然后单击标记，则会显示带有业务详细信息的 infowindow

我的代码已经从我在这里和那里找到的片段组合在一起所以我知道它是一团糟，那里的东西没有触发我想要的 infowindow 。谁能发现我出错的地方？

提前致谢，

C

作为参考，当我点击标记时，我会得到this （我已经删除了详细信息）

然而，当我将其运行为自动打开时，我得到this

    <script>      
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 54.71891, lng: -8.716691},
      zoom: 16,
      disableDefaultUI: true,
      keyboardShortcuts: false,
      disableDoubleClickZoom: true,
      draggable: false
    });

    var infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);

    service.getDetails({
      placeId: 'ChIJBy4MUDc8X0gR7LGOUiAYQeQ'
    }, function(place, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location
        });
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map, marker);
          infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
            '<p>' + place.formatted_address + '</p>' +
            '<p><a href="https://www.google.com/maps?cid=16447453841236865516"><strong>Get Directions / Larger Map</strong> </a></p>' +
            '</div>');
        });
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
      infowindow.open(map, marker);
    });
      }
    });
  }
</script>

Answer 1

在您的代码中，您可以点击标记来设置infowindow的内容。因此，如果您在addListener之前设置内容，我认为可以。像这样：

<script>      
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 54.71891, lng: -8.716691},
        zoom: 16,
        disableDefaultUI: true,
        keyboardShortcuts: false,
        disableDoubleClickZoom: true,
        draggable: false
    });

    var service = new google.maps.places.PlacesService(map);

    service.getDetails({
        placeId: 'ChIJBy4MUDc8X0gR7LGOUiAYQeQ'
    }, function(place, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location
            });
            var infowindow = new google.maps.InfoWindow();
            infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
                '<p>' + place.formatted_address + '</p>' +
                '<p><a href="https://www.google.com/maps?cid=16447453841236865516"><strong>Get Directions / Larger Map</strong> </a></p>' +
                '</div>');
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
            });
            google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                infowindow.open(map, marker);
            });
        }
    });
}
</script>

我希望你能得到你想要的东西。

Google Maps API - 带有地方详情的InfoWindow自动打开，不含内容

1 个答案: