Google Map 未在搜索按钮单击时初始化答案

【问题标题】：Google Map not initialize on search button clickGoogle Map 未在搜索按钮单击时初始化
【发布时间】：2014-10-03 01:33:35
【问题描述】：

地图正在加载查找作为默认页面加载，但如果我试图在搜索框事件上加载地图。它不工作。请检查以下代码

         var address = 'Dubai';
         var neighborhoods = [
           new google.maps.LatLng(25.23247465817403, 55.30191340351564),
           new google.maps.LatLng(25.244586082480332, 55.29822268391115),
           new google.maps.LatLng(25.230844181976337, 55.32225527668459),
           new google.maps.LatLng(25.224787936110832, 55.28526224995119)
         ];
         var markers = [];
         var iterator = 0;
         var map;
         var geocoder = new google.maps.Geocoder();
         function initialize() {
         markers = [];
         iterator = 0;
             var mapOptions = {
                 zoom: 12,
                 //center: berlin
             };
             map = new google.maps.Map(document.getElementById('mapCanvas'),
                     mapOptions);
             geocoder.geocode({
                 'address': address
             },
             function (results, status) {
                 if (status == google.maps.GeocoderStatus.OK) {
                     map.setCenter(results[0].geometry.location);
                 }
             });
            drop();
         }

         function drop() {
             for (var i = 0; i < neighborhoods.length; i++) {
                 setTimeout(function () {
                     addMarker();
                 }, i * 200);
             }
         }
function addMarker() {
     var image = 'img/flagred.png';
     var marker = new google.maps.Marker({
         position: neighborhoods[iterator],
         map: map,
         icon: image,
         title:"Click Here to Add this Property",
         draggable: false,
         animation: google.maps.Animation.DROP
     });
     markers.push(marker);
     google.maps.event.addListener(marker, 'click', function() {
         // your magic goes here
         alert(this.position);
     });
     iterator++;
 }

按钮点击事件

    $("#lbl_save").click(function () {
        var city = $('#txt_srch_city').val();
        var region = $('#txt_srch_region').val();
        if (city != "" && region != "") {
            var merge = city + "," + region;
            address = merge;
            initialize();
        }
        else {
            alert("Please enter valid location!!");
        }
    });

【问题讨论】：

标签： jquery google-maps google-maps-api-3 google-maps-markers google-maps-api-2

【解决方案1】：

在按钮成为 DOM 的一部分后（在页面 onload 事件上），您需要调用代码来设置按钮单击侦听器：

// one option.  You can use the JQuery equivalent also.
google.maps.event.addDomListener(window, 'load', function(){
         $("#lbl_save").click(function () {
             var city = $('#txt_srch_city').val();
             var region = $('#txt_srch_region').val();
             if (city != "" && region != "") {
                 var merge = city + "," + region;
                 address = merge;
                 initialize();
             } else {
                 alert("Please enter valid location!!");
             }
         });
});

working fiddle

【讨论】：