地理编码地址输入 Google Maps API答案

【问题标题】：Geocoding Address input Google Maps API地理编码地址输入 Google Maps API
【发布时间】：2014-03-01 03:26:01
【问题描述】：

    <!DOCTYPE html> 
    <html>
      <head>
          <title></title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map-canvas { width: 1000px; height: 600px }  /* ID */
    </style>
      <!--Include the Maps API JavaScript using a script tag.-->
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
     <script type="text/javascript">
         //Function called when the window loads shown below in the addDomlistener
         function initialize() {
             var geocoder = new google.maps.Geocoder();
             var mapOptions = { center: new google.maps.LatLng(40.5, -75.5), zoom: 8 };
             var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
         }

         function calcAddress(address)
         {
             var address = document.getElementById("address").value;
             geocoder.geocode({ 'address': address }, function (results, status) {
                 if (status == google.maps.GeocoderStatus.OK) {
                     //Got result, center the map and put it out there
                     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);
                 }
             });
         }

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>

  </head>
  <body>
      <div id="panel">
      <input id="address" type="text">
       <input type="button" value="Search" onclick="calcAddress()" />
   </div>
    <div id="map-canvas"/>
  </body>
</html>

我正在学习 google maps API，我只是想让一个简单的地址搜索工作，我错过了什么？我看过类似的帖子，但找不到不对的地方，可能需要一些新的眼光。

【问题讨论】：

标签： api maps

【解决方案1】：

变量map 和geocoder 在initialize() 函数之外不可见。如果您打开控制台，则会写入错误：

ReferenceError: geocoder is not defined

它们应该像这样全局化：

     var map,
         geocoder;

     function initialize() {
         geocoder = new google.maps.Geocoder();
         var mapOptions = { center: new google.maps.LatLng(40.5, -75.5), zoom: 8 };
         map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
     }

另外，div 标签不是自动关闭的。

<div id="map-canvas"/>

应该改为

<div id="map-canvas"></div>

【讨论】：

我对它进行了相应的更改，它可以正确加载但不执行搜索。
如果您输入，例如 Allentown，然后按搜索按钮，您会得到什么？您必须在地图上获得标记。控制台窗口中是否出现任何错误？