用新地图（和新选项）替换地图 - Google Maps API答案

【问题标题】：Replace map with new map (and new options) - Google Maps API用新地图（和新选项）替换地图 - Google Maps API
【发布时间】：2014-04-26 21:12:21
【问题描述】：

我有一个网站，可以创建带有多个标记的地图。

长话短说，我现在想要一个函数，当调用它时，它会创建一个新地图，用几个新选项替换旧地图，而无需重新加载页面。

我尝试了几件事无济于事。我最近的尝试是清除包含地图的 div 并像以前一样重新创建一个。

即

    function replaceMap() {

        $('#map-canvas').empty();

        var map2;
        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644)
            };
            map2 = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }

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

    }

这成功删除了旧地图，但仅此而已。

我在正确的轨道上吗？

我很高兴使用 jQuery，但经验很少，所以我需要一些帮助。

【问题讨论】：

标签： javascript jquery ajax google-maps google-maps-api-3

【解决方案1】：

      //this recived the parameters to set google maps     

     function myGetUrlVars() {
    var vars = [], hash;
    var url = window.location.href.replace(/&amp;/gi, '&');
    var hashes = url.slice(window.location.href.indexOf('?') + 1).split(
            '&_');
    for ( var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}


//*******************************start google api ****************//

params = myGetUrlVars();
var option = params['option'];

【讨论】：

【解决方案2】：

函数initialize目前只会被调用1次（当window的onload触发时）。

但是，使用 $.empty() 不是一个好主意，它可能会引入内存泄漏。

使用现有地图，删除标记并使用setOptions() 应用新选项

【讨论】：

谢谢。我之前尝试过这个并遇到了很多麻烦，但如果这是最好的方法。我再去一次

【解决方案3】：

如果您尝试使用一个 iframe 并在 iframe 中设置新的 src，我有一个使用这种模式的站点并且工作正常。

您可以在我的网站上查看如何工作。 http://www.skinnygirldaily.com/s.nl/sc.23/.f

【讨论】：

总体而言，新地图将具有依赖于用户输入的选项，因此它必须比 iframe 更具动态性
您可以使用来自 url 的参数设置新地图，我认为。尝试使用函数。