Geocoding Address input Google Maps API

StackOverflow https://stackoverflow.com/questions/22103839

  •  18-10-2022
  •  | 
  •  

문제 

    <!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>

I'm learning about google maps API, and I am just trying to get a simple address search to work, what am I missing? I've seen similar posts, but can't find what isn't right, might need some fresh eyes.

올바른 솔루션이 없습니다

다른 팁

Varaibles map and geocoder are not visible outside of initialize() function. If you open console there is error written:

ReferenceError: geocoder is not defined

They should be made global like:

     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);
     }

Additionaly, div tag is not self-closing.

<div id="map-canvas"/>

should be changed to

<div id="map-canvas"></div>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top