google-maps - JS 在地图上生成地理编码搜索

Question

Google 的简单地理编码示例看起来很简单，这就是我需要的所有功能。但是，我有多个通过 qTip 工具提示生成的谷歌地图，所以我希望地理编码搜索字段位于每张地图的顶部（而不是它们上方）。查看我当前的FIDDLE。解决这个问题的最佳方法是什么？

Answer 1

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

Answer 2

解决了。我基本上使用 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);
        }
    });
});