谷歌地图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附加搜索框

回答

相关问题