谷歌地圖API附加搜索框

我很努力地引入第二個搜索來放置像第一個搜索標記。我已經編制了一般搜索和標記位置的編碼，如您所見，並添加了一個額外的搜索框但無法確定如何使該搜索框與第一個搜索框完全相同。谷歌地圖API附加搜索框

基本上我試圖用一個提交按鈕同時標記兩個單獨的位置。

誰能幫助或點我在正確的方向，請的兩個輸入端

<!-- Google Maps and Places API --> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> 

    <!-- jQuery --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

    <script type="text/javascript">  
     //declare namespace 
     var up206b = {}; 

     //declare map 
     var map; 

     function trace(message) 
     { 
      if (typeof console != 'undefined') 
      { 
       console.log(message); 
      } 
     } 


     up206b.initialize = function() 
     { 
      var latlng = new google.maps.LatLng(34.070264, -118.4440562); 
      var myOptions = { 
       zoom: 13, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     } 

    var geocoder = new google.maps.Geocoder();` 

     up206b.geocode = function() 
{ 
    var address = $('#address').val(); 
    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); 
     } 
    }); 
} 



up206b.geocode = function() 
{ 
    var address = $('#address').val(); 
    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); 
     } 
    }); 
} 

var address = $('#address').val(); 

</script> 
</head> 
<body onload="up206b.initialize()"> 



    <div style= "float:left"> 



    </div> 



    <div style="width:380px; height: 100%; overflow:auto; float:right; padding-left:10px; padding-right:10px;"> 
     <h1>Map Search</h1> 


     <div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;"> 
      <input type="text" id="address"> 
      <input type="text" id=""> 
      <input type="button" value="Submit" onClick="up206b.geocode()"> 
     </div> 

    </div> 




    <div id="map_canvas" style="height:100%; margin-left:400px;"></div> 



</body> 
</html>

來源

2016-02-17 Kev

獲得價值，地理編碼存在的價值，並將其添加到地圖中。

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 

 
    <!-- Google Maps and Places API --> 
 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> 
 

 
    <!-- jQuery --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 

 
    <script type="text/javascript">  
 
     
 
     //declare namespace 
 
     var up206b = {}; 
 

 
     //declare map 
 
     var map; 
 

 
     function trace(message) 
 
     { 
 
     if (typeof console != 'undefined') 
 
     { 
 
      console.log(message); 
 
     } 
 
     } 
 

 
     up206b.initialize = function() 
 
     { 
 
     var latlng = new google.maps.LatLng(34.070264, -118.4440562); 
 
     var myOptions = { 
 
      zoom: 13, 
 
      center: latlng, 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }; 
 
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
     } 
 

 
     var geocoder = new google.maps.Geocoder(); 
 

 
     up206b.geocode = function() 
 
     { 
 

 
     var addresses = [ $('#address').val(), $('#address2').val()]; 
 

 
     addresses.forEach(function(address){ 
 
      if(address){ 
 
      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); 
 
      } 
 
      }); 
 
      } 
 
     }); 
 
     } 
 

 
    </script> 
 
    </head> 
 
    <body onload="up206b.initialize()"> 
 

 
    <div style="position: absolute; top: 0; right: 0; width:380px; height: 500px; overflow:auto; float:right; padding-left:10px; padding-right:10px;"> 
 
     <h1>Map Search</h1> 
 

 
     <div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;"> 
 
     <input type="text" id="address"> 
 
     <input type="text" id="address2"> 
 
     <input type="button" value="Submit" onClick="up206b.geocode()"> 
 
     </div> 
 

 
    </div> 
 

 
    <div id="map_canvas" style="height: 500px; width: 500px;"></div> 
 

 
    </body> 
 
</html>

來源

2016-02-17 09:59:19

您好，感謝您的。但我現在遇到的麻煩是當你點擊提交時沒有任何反應。它在我改變它之前爲一次性使用，但現在不適用於任何輸入。有任何想法嗎？ – Kev

非常感謝。由於某種原因，當我自己更改代碼時，它不起作用，但是通過複製並粘貼您的代碼，它確實很奇怪，但謝謝。 – Kev

谷歌地圖API附加搜索框

回答

相關問題