Javascript 单击元素后创建Google Map v3

我想做的是在单击元素后创建一个映射。我正在使用谷歌地图v3

我有一个不动产列表页面，每页显示15个结果/属性。我希望在单击元素时创建一个贴图，而不是生成15个贴图。单击后，将执行地图生成过程。地图画布/div最初是隐藏的

我认为click元素和map元素的关系应该是这样的：

<span id="12-1234" lat="10.101010" lng="-25.252525" class="view-map">View Map</span>
... other markup ...
<div id="12-1234-map" class="google-map"></div>

$('.view-map').click(function(){
     google.maps.event.addDomListener( this, 'click', initialize );
     $("#" + this.id + "-map").toggle();
});

显然，这并不完美，因为您必须在查看地图之前再单击该元素几次，因为您已经在单击该元素之后将另一个单击事件绑定到该元素

---

我觉得我遗漏了一些明显的东西。

在视图映射单击函数中，只需调用映射初始化方法，并传递适当的值。这个初始化函数可以显示map div，然后适当地初始化map

丑陋且未经检查的示例：

var params = {
  lat : 47.5,
  lng : -122.5 }

$('.view-map').click(params, function(){
  params.id = this.id //e.g. 1234
  initialize(params);
  });

function initialize(params){
 // show the 1234-map div, initialize the map
}

---

我试过类似的方法。我将以你为例，看看我能想出什么。谢谢你的帮助。是的，我以前做过类似的事情。我尝试使用的桥不是将参数传递给initialize（）函数。它告诉API绘制地图。Google Maps API文章使用：

Google.Maps.event.addDomListener（窗口'load'，init）

如何在将附加到相应div的initialize（）函数中执行类似操作？我越来越近了。这将在正确的DIV上创建映射。但是现在我得到一个错误，map not defined。这是对我的createMarker（）函数的引用<代码>函数createMarker（latlng，address）{var html='some html stuff'；var infoWindow=new google.maps.infoWindow（{content:html}）；var marker=new google.maps.marker（{position:latlng，map:map，title:address}）；google.maps.event.addListener（marker，'click'，function（）{infoWindow.open（map，marker）；}）；return marker；}我已经纠正了我的错误。我在createrMarker（）函数之后，在initialize（）函数之前定义了

var map；

。不太清楚为什么会出现这个问题。如果可以，请解释为什么mapDiv[0]对mapDiv有效。我做过类似的事情，只是在initialize（）函数中没有jQuery。正如

var mapDiv=document.getElementById（link.id+'-map'）；

也有效，不需要mapDiv[0]。我现在看到，您只使用mapDiv[0]，因为它是一个jQuery对象，您需要elements对象，即[object HtmlLevel].一定是做了错事或其他小事。谢谢你的解决方案！

function initialize(link) {
  var mapDiv = $('#' + link.attr('id') + '-map');
  mapDiv.toggle();

  var options = {
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(link.attr('lat'), link.attr('lng'))
  };

  var map = new google.maps.Map(mapDiv[0], options);
}

$('.view-map').click(function(){
  initialize(this);
});