如何使用Google Maps API v3更新已创建的地图

时间:2015-01-29 20:48:35

标签: javascript google-maps-api-3

我可以使用以下代码同时创建地图并为其添加标记:

         function initialize() {
           var mapOptions = {
                zoom: 4,
                center: new google.maps.LatLng(39.013421, -94.707803)
           };

           var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);';

          geocoder = new google.maps.Geocoder();
          var address = "12345 Random Address Dr San Diego, CA";
          geocoder.geocode( { 'address': address}, function(results, status) {
          var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                icon: "../image/icons/map/icon_marker1.png"
              });
          });

        }       
        function loadScript() {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
              '&signed_in=true&callback=initialize';
          document.body.appendChild(script);
        }

        window.onload = loadScript;

如果我尝试删除标记代码并在以后调用它,我会收到错误"地图未定义"在这一点上它不是....有没有一种正确的方法来调用现有的地图?目标是单击一个按钮并使用以下代码触发器:

$(".addLayer").click(function(){
     //Add Marker Code
            geocoder = new google.maps.Geocoder();
            var address = "12345 Random Address Dr San Diego, CA";
            geocoder.geocode( { 'address': address}, function(results, status) {
              var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    icon: "../image/icons/map/icon_marker1.png"
                });
            });
});

1 个答案:

答案 0 :(得分:1)

在脚本开头定义地图。 这里map var的范围只是你的initialize()函数

编辑:这是一个例子

var map = new google.maps.Map(document.getElementById('map-canvas'));';

function initialize() {
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(39.013421, -94.707803)
    };

    map.setOptions(mapOptions)

    geocoder = new google.maps.Geocoder();

    /* the rest of your code */

}

$(".addLayer").click(function(){
 //Add Marker Code
        geocoder = new google.maps.Geocoder();
        var address = "12345 Random Address Dr San Diego, CA";
        geocoder.geocode( { 'address': address}, function(results, status) {
          var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                icon: "../image/icons/map/icon_marker1.png"
            });
        });
});