Google Maps JavaScript API v3에서 SearchBox를 통합하는 방법은 무엇입니까?

상단에 검색 상자가있는 Google지도를 만들고 싶습니다. https://google-developers.appspot.com/...과 JavaScript API v3.Google Maps JavaScript API v3에서 SearchBox를 통합하는 방법은 무엇입니까?

내가 URL에 (PHP는 GET) 위도와 경도를 얻어서지도를 보여주기 위해 다음 코드를 사용하여 순간

<?php 

$latitude = $_GET['lat']; 
$longitude = $_GET['long']; 


?> 
<!DOCTYPE html> 
<html> 
    <head> 
    <script type="text/javascript"> 
    </script> 
    <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 { height: 100% } 

     #search-panel { 
     position: absolute; 
     top: 5px; 
     left: 50%; 
     margin-left: -180px; 
     width: 350px; 
     z-index: 5; 
     background-color: #fff; 
     padding: 5px; 
     border: 1px solid #999; 
     } 
     #target { 
     width: 345px; 
     } 


    </style> 
    <script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=true"> 
    </script> 
    <script type="text/javascript"> 
     function initialize() { 

      var input = document.getElementById('searchTextField'); 
      var image = 'pin.png'; 
      var myLatlng = new google.maps.LatLng(<?php echo "$latitude" ?>, <?php echo "$longitude" ?>); 
     var mapOptions = { 
      center: myLatlng, 
      zoom: 15, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      streetViewControl: true, 
     }; 




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


      var marker = new google.maps.Marker({ 
     icon: image, 
     position: myLatlng, 
     map: map, 
     animation: google.maps.Animation.DROP, 
     title:"You Location" 

    }); 


     } 
    </script> 
    </head> 
    <body onload="initialize()"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
    </body> 
</html>

을하지만 검색 상자를 통합하는, 그것을 얻을하지 않습니다 명명 된 사이트 에서처럼!

누군가 도움을 줄 수 있습니까?

나는이에 코드를 편집 할 수 있지만 나는이 작동하지 않습니다! :

<?php 

$latitude = $_GET['lat']; 
$longitude = $_GET['long']; 


?> 
<!DOCTYPE html> 
<html> 
    <head> 

    <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 { height: 100% } 

     #search-panel { 
     position: absolute; 
     top: 5px; 
     left: 50%; 
     margin-left: -180px; 
     width: 350px; 
     z-index: 5; 
     background-color: #fff; 
     padding: 5px; 
     border: 1px solid #999; 
     } 
     #target { 
     width: 345px; 
     } 


    </style> 
    <script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=true"> 
    </script> 
    <script type="text/javascript"> 
     function initialize() { 

      var searchBox = new google.maps.places.SearchBox(input, { 
    bounds: defaultBounds // have to be defined first 
}); 

google.maps.event.addListener(searchBox, 'places_changed', function() { 
     var places = searchBox.getPlaces(); 
     // do your stuff here 


      var input = document.getElementById('searchTextField'); 
      var image = 'pin.png'; 
      var myLatlng = new google.maps.LatLng(<?php echo "$latitude" ?>, <?php echo "$longitude" ?>); 
     var mapOptions = { 
      center: myLatlng, 
      zoom: 15, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      streetViewControl: true, 
     }; 




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


      var marker = new google.maps.Marker({ 
     icon: image, 
     position: myLatlng, 
     map: map, 
     animation: google.maps.Animation.DROP, 
     title:"You Location" 

     var input = document.getElementById('target'); 
     var searchBox = new google.maps.places.SearchBox(input); 
     var markers = []; 

     google.maps.event.addListener(searchBox, 'places_changed', function() { 
      var places = searchBox.getPlaces(); 


    }); 

    }); 

     } 
    </script> 
    </head> 
    <body onload="initialize()"> 
    <div id="search-panel"> 
     <input id="target" type="text" placeholder="Search Box"> 
    </div> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
    </body> 
</html>

출처

2012-10-05 Laurenz Glück

또한 장소 검색 창에로드해야

var searchBox = new google.maps.places.SearchBox(input, { 
    bounds: defaultBounds // have to be defined first 
});

그런 다음 당신이들을 수를 places_changed 이벤트 :

google.maps.event.addListener(searchBox, 'places_changed', function() { 
     var places = searchBox.getPlaces(); 
     // do your stuff here 
});

배치 한 예제 페이지의 소스 코드를보고 그림 마커와 같은 아이디어를 얻으십시오.

자세한 내용은 SearchBox API Documentation에서 찾을 수 있습니다.

출처

2012-10-05 12:06:20 j0nes

Pls는 @ 내 업데이트로 보입니다, 작동하지 않습니다! : /// 검색 필터가 표시되지만지도가 표시되지 않습니다. –

@ LaurenzGlück 코드에 많은 sintax 오류가 있습니다. 예를 들어, addListener 호출 (put "});을 닫지 않습니다." "// 당신의 물건을 여기에서"후에. – nicolascolman

Google Maps JavaScript API v3에서 SearchBox를 통합하는 방법은 무엇입니까?

답변

관련 문제