谷歌地图API v3标记点击信息窗口

Google Maps API v3 marker on click with infowindow

本文关键字：信息 信息窗 窗口 API v3 谷歌地图      更新时间：2023-09-26

我对信息窗口有问题。当我点击地图时，我会创建标记，但我也想显示信息窗口。此代码不适用于此部件：

google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
});

下面是代码。。感谢的帮助

var pridat;
var map;
function initialize() {
    var locc = new google.maps.LatLng(49.938682,17.903331);
    var mapOptions = {
        zoom: 14,
        center: locc,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
    var contentwindow = '<div>your point</div>'
    var infowindow = new google.maps.InfoWindow({
        content: contentwindow
    });
    // IF I REMOVE THIS PART -> IT WORKS, BUT WITHOUT INFOWINDOW
    google.maps.event.addListener(marker, 'click', function(){
        infowindow.open(map, marker);
    });
    // END OF PART
    google.maps.event.addListener(map, 'rightclick', function(event) {
        placeMarker(event.latLng);
    });
}
function placeMarker(location) {
    if (marker) {
        marker.setPosition(location);
    } else {
        marker = new google.maps.Marker({
            position: location,
            map: map,
            title: 'My point',
            draggable: true,
        });
    }
}

当javascript不起作用时，您应该查看它的错误。您正试图在"标记"存在之前使用它。如果您将标记的"click"侦听器移动到它存在的placeMarker函数中，并使信息窗口全局可访问，那么它应该可以工作。你发布的代码在地图上没有任何标记。

var pridat;
var map;
var marker = null;
var infowindow = null;
function initialize() {
 var locc = new google.maps.LatLng(49.938682,17.903331);
 var mapOptions = {
    zoom: 14,
    center: locc,
    mapTypeId: google.maps.MapTypeId.ROADMAP
                  }
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
var contentwindow = '<div>your point</div>'
infowindow = new google.maps.InfoWindow({
    content: contentwindow
 });
google.maps.event.addListener(map, 'rightclick', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
if (marker) {
  marker.setPosition(location);
} else {
 marker = new google.maps.Marker({
      position: location,
      map: map,
      title: 'My point',
      draggable: true,
     });
   // IF I REMOVE THIS PART -> IT WORKS, BUT WITHOUT INFOWINDOW
   google.maps.event.addListener(marker, 'click', function(){
       infowindow.open(map, marker);
   });
 }
}

工作示例

相关文章：