如何使用google.maps.Map结果呈现谷歌地图

Question

我想在div中渲染google map，它位于modal（模态打开时间，编译把手模板，所以我的意思是div在模板中）.These {一旦用户点击按钮，{1}}就会打开。制作地图后，在模型中保存model。如果我想放置标记，我将从模型中获取mapInstance。为此，我编写了以下代码< / p>

mapInstance

当 var mapStyles={mapOptions:/*options of map*/} var el = document.getElementById("locationGmap"); if (chartsModelObj.get("locationMapInstance")==="") { //checking whether user with this feature initial time or not var mapInstance=new google.maps.Map(domEle, mapStyles.mapOptions); chartsModelObj.set("locationMapInstance",mapInstance); }; 的第一次点击事件时，地图正在出现并将实例存储在模型中。所以首先点击事件时间它正常工作。但是在button的第二次点击事件中，我正在重新模板化由于这个button没有出现（第二次我不想创建实例，我想使用旧实例。）。

供参考我附上截图

首先点击活动：

首次点击事件（第二，第三，......）后：

我在模型中有一个旧的mapIstance。我试图按以下方式设置。我的方法错了，我也附了截图。

map

如何使用旧的mapInstance渲染地图。

感谢。

Answer 1

我认为您可以通过在隐藏的<div>中创建一次地图来解决您的问题，然后将地图移动到您想要显示的位置，当您想要显示它时（也适用于模态）< / p>

参见此工作演示 - ＆gt;的 http://jsfiddle.net/k6d7D/

使用<div>

在display: none;上创建Google地图

在示例中，我将地图移动到<div>点击：

function moveMap() {
    map.style.display='block';
    this.appendChild(map); 
    google.maps.event.trigger(googleMap, 'resize');
}
map2.onclick = moveMap;
map3.onclick = moveMap;

这里最重要的是触发resize - 事件，以便正确地重绘地图。你没有显示如此多的代码，所以根据你的问题真的无法将上述内容放入正确的上下文中，但我相信你可以设法让它工作。