地図上にジオコードの検索が行われました。

Question

Googleのsimple geocode exampleは、わかりやすいようですが、それだけで必要な機能です。しかし、qTipツールチップから複数のGoogleマップを生成しているので、それぞれの地図の上にジオコード検索フィールドを置いてください（上にはない）。現在のFIDDLEを参照してください。これについてはどうすればいいですか？

Answer 1

解決済み。私は基本的にjQueryを使ってqTipのコンテナに検索ボックスを追加し、jQuery live（）で検索ボタンのクリックを聞いた。私は新しいバイオリンを作成するのが面倒だけど、ここではいくつかのコードです：途中そこ

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を使用してください。あなたはそれが私の町の外に動作するために「SP」をオフにする必要が

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

こちらを参照してください。

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>