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不需要显示。