JavaScript谷歌地圖geocoder初始化

Question

我想使用谷歌地圖JavaScript API來映射基於此示例的地址。

https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple

文檔建議客戶方JavaScript方式是最好的方式來處理的請求配額。到現在爲止還挺好。我的問題是從這個例子轉到我的具體情況。我的地址已經在數據庫中，所以我不需要用戶輸入一個。另外我不希望地圖加載到頁面。相反，我希望用戶點擊鏈接時加載地址的地圖。

我有一個腳本工作，使用initialize（）加載在一個div中的地圖。但我的問題是初始化與地理編碼工作。示例中的地理編碼取決於使用bodyonload初始化加載，這是我不想要的。

這是代碼。希望任何建議：

的JavaScript

var map; 
    var geocoder; 


    function codeAddress() { 
      var address = document.getElementById('address').value; 
      geocoder.geocode({ 'address': address}, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
       map.setCenter(results[0].geometry.location); 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location 
       }); 
       } else { 
       alert('Geocode was not successful for the following reason: ' + status); 
       } 
      }); 
      } 

     function initialize() { 
    geocoder = new google.maps.Geocoder(); 
     var latlng = new google.maps.LatLng(40.7562008,-73.9903784); 
     var myOptions = { 
      zoom: 18, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     } 

HTML

<input id="address" type="hidden" value="Palo Alto CA"> 
<a href="javascript:void(0)" onclick="initialize()">View map without geocoding</a> 
<div id="map_canvas" style="width:300px; height:300px;"></div> 
<a href="javascript:void(0)" onclick="codeAddress()">View map of geocoded address</a> 

Answer 1

我與你的腳本唯一的問題是在initialize()功能下面一行：

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

通過聲明var map，你的腳本只是聲明一個名爲map的本地變量，而不是使用在腳本頂部聲明的全局變量map。

通過去除var，腳本使用全局變量和運行良好：

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

最後，獲得地理編碼地圖上的鏈接點擊加載，你的地理編碼地址更改onclick到onclick="initialize();codeAddress();"。

補充：

嘗試的initialize()和codeAddress()方法組合成以下幾點：

function initialize() { 
    geocoder = new google.maps.Geocoder(); 

    var address = document.getElementById('address').value; 
    geocoder.geocode({ 'address': address }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var myOptions = { 
       zoom: 18, 
       center: results[0].geometry.location, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
} 

然後只需撥打您的鏈接initialize()。

基本上，我們正在做的是調用geocoder.geocode()是codeAddress()被執行，並將所得委託裏面，我們使用results[0].geometry.location初始化地圖。這樣，臨時latlong不需要顯示。