javascript 使用信息窗口点击 Google Maps API v3 标记

Google Maps API v3 marker on click with infowindow

提问by Raold

I have problem with infowindow. I create marker when i click on map but i want to show infowindow too. This code not working with this part:

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

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

Here is code below.. Thank for help

这是下面的代码..感谢帮助

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,
        });
    }
}

回答by geocodezip

You should look at the javascript errors when it doesn't work. You are attempting to use "marker" before it exists. If you move the 'click' listener for the marker into the placeMarker function where it exists, and make the infowindow globally accessible, it should work. The code you posted doesn't put any markers on the map.

当它不起作用时，您应该查看 javascript 错误。您试图在“标记”存在之前使用它。如果您将标记的“单击”侦听器移动到它所在的 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);
   });
 }
}

working example

工作示例