Question

我在我的网站上使用谷歌地图api，而不是在信息框中显示内容，我想在谷歌地图html之外的单独div中显示内容。因此，当点击标记时，该标记的内容在#sidebar中可见。

任何人都可以帮我指出正确的方向吗？

var infowindow = new google.maps.InfoWindow();
function initialize() {
    map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 12, 
        center: new google.maps.LatLng(52.4862, 1.8904),
        scrollwheel:  false,
    });
    var latlngbounds = new google.maps.LatLngBounds();
    for (var i = 0; i < locations.length; i++) {  
        var marker = new google.maps.Marker({
            position: locations[i].latlng,
            map: map,
            icon: '../../../img/map-marker-elf.png'
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i].info);
            infowindow.open(map, marker);  
          }
        })(marker, i));

        latlngbounds.extend(marker.position);
        //Center map and adjust Zoom based on the position of all markers.
        if (latlngbounds.getNorthEast().equals(latlngbounds.getSouthWest())) {
       var extendPoint = new google.maps.LatLng(latlngbounds.getNorthEast().lat() + 0.01, latlngbounds.getNorthEast().lng() + 0.01);
       latlngbounds.extend(extendPoint);
        }

        map.fitBounds(latlngbounds);
        map.setCenter(latlngbounds.getCenter());

    }
}
 <div class="map-wrapper">
        <div id="sidebar"></div>
        <div id="map" style="width: 100%; height: 500px;"></div>
</div>

Answer 1

简单：

google.maps.event.addListener(marker, 'click', (function(i) {
    return function() {
        document.getElementById('sidebar').innerHTML = locations[i].info;
    }
})(i));

proof of concept fiddle

如何在单独的div中显示infowindow内容

1 个答案: