google maps api 附加搜索框答案

【问题标题】：google maps api additional search boxgoogle maps api 附加搜索框
【发布时间】：2016-02-17 08:53:35
【问题描述】：

我正在努力引入第二次搜索来放置第一次搜索那样的标记。我已经为一般搜索和标记位置制定了如下编码，您可以看到并添加了一个额外的搜索框，但无法弄清楚如何使该搜索框与第一个搜索框一样。

基本上我试图用一个提交按钮同时标记两个不同的位置。

谁能帮助我或指出正确的方向

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

【问题讨论】：

标签： javascript html google-maps google-maps-api-3

【解决方案1】：

获取两个输入的值，对存在的值进行地理编码并将它们添加到地图中。

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

【讨论】：

嗨，谢谢。但我现在遇到的麻烦是当你点击提交时什么也没有发生。在我更改它之前它只适用于单一用途，但现在不适用于任何一种输入。有什么想法吗？
非常感谢。出于某种原因，当我自己更改代码时它不起作用，但是通过复制和粘贴你的代码，它确实很奇怪，但是谢谢。