用户在 google 个地图中放置了带有信息窗口的标记

Question

我正在做一个学校项目，我使用 google 地图制作旅行刨床。这个想法是用户可以在地图上放置标记并用文本填充它们。到目前为止，我已经设法加载 google 地图，我可以放置标记，但我无法让信息窗口工作。当我查看 googles API 时，它说要制作一个标记，制作一个信息窗口并在单击标记时使用 addlistener 打开信息窗口，所有不同的教程也说同样的话但是我不能让它工作。到目前为止，我的代码如下所示：

function initialize() 
{
  var mapOptions = 
  {
    zoom: 2,
    center: {lat: 0.0, lng: 0.0}
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    google.maps.event.addListener(map, 'rightclick', function(event) {
        var marker = new google.maps.Marker({
            position: event.latLng, //map Coordinates where user right clicked
            map: map,
            draggable:true, //set marker draggable
            animation: google.maps.Animation.DROP
        });
    });

  //Content structure of info Window for the Markers
        var contentString = $('<div class="marker-info-win">'+
        '<div class="marker-inner-win"><span class="info-content">'+
        '<h1 class="marker-heading">New Marker</h1>'+
        'This is a new marker infoWindow'+
        '</span>'+
        '</div></div>');

        //Create an infoWindow
        var infowindow = new google.maps.InfoWindow();

        //set the content of infoWindow
        infowindow.setContent(contentString);

        //add click event listener to marker which will open infoWindow          
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker); // click on marker opens info window
        });
}

谁能告诉我我做错了什么？整个代码可以在这里看到：http://pastebin.com/R1bg0gi4

Answer 1

正如 duncan 评论的那样，您必须在创建标记后将设置标记的点击侦听器的代码移动到地图的右键单击处理程序中

信息窗口的内容可以是字符串或元素节点，您提供 none 个（jQuery-对象）

function initialize()
{
  var mapOptions =
 {
    zoom: 2,
    center: {lat: 0.0, lng: 0.0}
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions),
   //Create an infoWindow
infowindow = new google.maps.InfoWindow();

google.maps.event.addListener(map, 'rightclick', function(event) {
    var marker = new google.maps.Marker({
        position: event.latLng, 
        map: map,
        draggable:true, //set marker draggable
        animation: google.maps.Animation.DROP
    });


  //Content structure of info Window for the Markers
    var contentString = $('<div class="marker-info-win">'+
    '<div class="marker-inner-win"><span class="info-content">'+
    '<h1 class="marker-heading">New Marker</h1>'+
    'This is a new marker infoWindow'+
    '</span>'+
    '</div></div>')[0];



    //set the content of infoWindow
    infowindow.setContent(contentString);

    //add click event listener to marker which will open infoWindow          
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker); 
    });
});
}


google.maps.event.addDomListener(window, 'load', initialize);

用户在 google 个地图中放置了带有信息窗口的标记

user placed markers with infowindows in google maps

infowindow

google-maps-api-3

google-maps-markers