JS在地圖上生成地理編碼搜索

Question

谷歌的simple geocode example看起來很簡單，這就是我需要的所有功能。不過，我通過qTip工具提示生成了多個Google地圖，因此我希望地理編碼搜索字段位於每個地圖的頂部（而不是它們上方）。看我目前的FIDDLE。什麼是最好的方式去做這件事？

Answer 1

已解決。我基本上使用jQuery將我的搜索框附加到qTip的容器，然後用jQuery live（）聽取關於搜索按鈕的點擊。我懶得來創建一個新的小提琴，但這裏的一些代碼：

在qTip的「渲染」事件：

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

... 

api.map = new google.maps.Map(container[0], myOptions); 
$(container).append('<div class="geosearch"><input type="text" class="geosearchinput" value="" /><button type="button" class="geosearchbutton">Search</button></div>'); 

... 

$('button.geosearchbutton').live('click', function() { 
    var address = $(this).prev('input.geosearchinput').val(); 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 

      ... add marker and handle markers array ... 

     } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
}); 

Answer 2

在div上使用一些合適的CSS。看到這裏

https://files.nyu.edu/hc742/public/googlemaps/geocodesp.html

你必須取消「SP」爲它我的城市以外的地方工作。

html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map_canvas { height: 100% } 
    #menu { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    padding: 0px; 
    font-family: Arial, sans-serif; 
    } 
... ... ... 

<div id="map_canvas"></div> 
<div id="menu"> 
    <b>address:</b> 
    <input id="text_address" type="text" size="60" onkeyup="checkReturn(event)"> 
    <input id="check_sp" type="checkbox" checked="checked">SP 
    <input type="button" value="clear" onclick="document.getElementById('text_address').value=''; document.getElementById('text_address').focus()"> 
    <input id="button3" type="button" value="clear markers" onclick="clearMarkers()"> 

</div>