2014-02-11 2 views
0

Google지도에 Google지도 검색 상자를 구현하는 데 관심이 있습니다. 이지도 코드에 장소 검색 상자를 추가하려면 어떻게합니까 :지도에 장소 검색 창을 추가하는 방법은 무엇입니까?

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<div id="map_canvas" style="width: 700px; height: 600px; float: left; margin: 10px"></div> 
<script type="text/javascript"> 
    function InitializeMap() { 
     var latlng = new google.maps.LatLng(32, 35); 
     var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP }; 

     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    } 
    window.onload = InitializeMap; 
</script> 

답변

0
<html> 
    <head> 
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
     <script> 
      var geocoder; 
      var map; 
      function InitializeMap() { 

       geocoder = new google.maps.Geocoder(); 
       var latlng = new google.maps.LatLng(32, 35); 

       var myOptions = { 

        zoom: 8, 

        center: latlng, 

        mapTypeId: google.maps.MapTypeId.ROADMAP 

       }; 

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

      } 

      function searchAddress() { 

       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); 
           document.getElementById('address').value = results[0].formatted_address; 
          } 
         } 
       ); 
      } 

      //window.onload = InitializeMap; 
      google.maps.event.addDomListener(window, 'load', InitializeMap); 
     </script> 
    </head> 
    <body> 
     <div> 
      <input id="address" type="text" name="address" value=""> 
      <input type="button" value="Search" onclick="searchAddress()"> 
     </div> 
     <div id="map_canvas" style="width:400px; height:400px;"></div> 
    </body> 
</html> 
+0

지도에 마커를 추가 할 수도 있습니다 (기본값 : InitializeMap() 및 searchAddress()에서 선택) – Alex

+0

Alex에게 고맙습니다. 마커를 도와 주시겠습니까? – user3296087

관련 문제