谷歌地圖初始化函數依賴

Question

我想傾斜我的initialize()功能......但每次我做，它會打破我的代碼。 我最終試圖做一些類似於this的工作，其中我有一個與地圖上的標記直接相關的東西的邊欄，AJAX位於...首先，我希望能夠將其他功能的initialize()功能。 這工作得很好：

<script> 

    function initialize() { 
    // create the map object 
    var mapOptions = { 
     zoom: 14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    };  
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 

    // create your location marker 
    var mylocOptions = { 
     draggable: true, 
     animation: google.maps.Animation.DROP, 
     icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png', 
      new google.maps.Size(22,22), 
      new google.maps.Point(0,18), 
      new google.maps.Point(11,11)), 
     title: "You are here..." 
    }; 
    var myloc = new google.maps.Marker(mylocOptions); 

    // get location information from browser, or from user input, or from database 
    <% if !signed_in? || !current_user.loc %> 
     if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(pos) { 
     var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); 
     myloc.setPosition(me); 
     myloc.setMap(map); 
     map.setCenter(me); 
     $.ajax({ 
      data: { me: me.toString() }, 
      type: 'POST', 
      url: '/set-location' 
     }) 
     }, function(error) { 
      var address = prompt('Where are you looking?'); 
      geocoder = new google.maps.Geocoder(); 
      geocoder.geocode({ 'address': address }, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       var me = results[0].geometry.location 
       myloc.setPosition(me); 
       myloc.setMap(map); 
       map.setCenter(me); 
      } else { 
       alert("Geocode was not successful for the following reason: " + status); 
      }; 
      }); 
     }); 
    <% else %> 
     var me = new google.maps.LatLng(<%= current_user.loc %>); 
     myloc.setPosition(me); 
     myloc.setMap(map); 
     map.setCenter(me); 
     map.setZoom(12); 
    <% end %> 

    // watch for marker movement, and update location accordingly 
    var oldPos = myloc.getPosition(); 
    google.maps.event.addListener(myloc, "dragend", function(e){ 
     revGeo = new google.maps.Geocoder(); 
     var newPos = myloc.getPosition(); 
     $.ajax({ 
     data: { me: newPos.toString() }, 
     type: 'GET', 
     url: '/set-location' 
     }) 
     if(oldPos != newPos) 
     revGeo.geocode({'latLng': newPos}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
      if (results[1]) { 
       $('#loc').html(results[1].formatted_address); 
      } 
      } else { 
      alert("Geocoder failed due to: " + status); 
      } 
     }); 
     oldPos = newPos; 
    }); 

    // when creating an event, check for event location, 
    // verify it's existance and put a marker down on the map 
    $(document).on('focusout', '#event_location', function() { 
     geocoder = new google.maps.Geocoder(); 
     address = document.getElementById("event_location").value; 
     geocoder.geocode({ 'address': address }, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var coords = results[0].geometry.location; 
      map.setCenter(coords); 
      var marker = new google.maps.Marker({ 
      map: map, 
      animation: google.maps.Animation.DROP, 
      position: coords 
      }); 
      $('#coords').html('coordinates: ' + coords) 
      $('#event_geocode').val(coords.toString()) 
     } else { 
      alert(status + " for " + address); 
     }; 
     }); 
    }); 
    } 
</script> 

...但我敢肯定，它可以被打破了。事實上，我知道必須分手才能開始做我想做的事情。我做錯了什麼想法？

Answer 1

使你的var map成爲一個全局變量，（在任何函數之外聲明）。

// Global 
var map; 

然後......

function initialize() { 
    // create the map object 
    var mapOptions = { 
     zoom: 14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // Do not use the var keyword inside the function.  
    map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 

// etc..