Google Maps API自動完成

Question

Google Maps APIを使用して2つの自動完成入力ボックスを作成し、位置をマークする地図を作成しようとしています。

現在のところ、ドキュメントの例に基づいて、自動補完機能を使ってマップ上にマーカーを配置する入力ボックスが1つありますが、これを拡張して2番目の入力ボックス同じ地図で同じことを達成するのに問題があります。これまで

コードが

<script type="text/javascript"> 
     function initialize() { 
       var mapOptions = { 
        center: new google.maps.LatLng(-33.8688, 151.2195), 
        zoom: 13, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(document.getElementById('map'), 
        mapOptions); 

       var input = document.getElementById('frombox'); 
       var autocomplete = new google.maps.places.Autocomplete(input); 

       autocomplete.bindTo('bounds', map); 

       var infowindow = new google.maps.InfoWindow(); 
       var marker = new google.maps.Marker({ 
        map: map 
       }); 


       google.maps.event.addListener(autocomplete, 'place_changed', function() { 
        infowindow.close(); 
        var place = autocomplete.getPlace(); 
        if (place.geometry.viewport) { 
        map.fitBounds(place.geometry.viewport); 
        } else { 
        map.setCenter(place.geometry.location); 
        map.setZoom(15); 
        } 


        var image = new google.maps.MarkerImage(
         place.icon, 
         new google.maps.Size(71, 71), 
         new google.maps.Point(0, 0), 
         new google.maps.Point(17, 34), 
         new google.maps.Size(35, 35)); 
        marker.setIcon(image); 
        marker.setPosition(place.geometry.location); 

        var address = ''; 
        if (place.address_components) { 
        address = [(place.address_components[0] && 
           place.address_components[0].short_name || ''), 
           (place.address_components[1] && 
           place.address_components[1].short_name || ''), 
           (place.address_components[2] && 
           place.address_components[2].short_name || '') 
           ].join(' '); 
        } 



        infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); 
        infowindow.open(map, marker); 

       }); 



       // Sets a listener on a radio button to change the filter type on Places 
       // Autocomplete. 
       function setupClickListener(id, types) { 
        var radioButton = document.getElementById(id); 
        google.maps.event.addDomListener(radioButton, 'click', function() { 
        autocomplete.setTypes(types); 
        }); 
       } 

       setupClickListener('changetype-all', []); 
       setupClickListener('changetype-establishment', ['establishment']); 
       setupClickListener('changetype-geocode', ['geocode']); 
       } 
       google.maps.event.addDomListener(window, 'load', initialize);     

         </script> 

は、誰も私が同じマップで同じことを行うには#toboxと呼ばれる第二の入力ボックスをセットアップする助けてもらえですが、私はそれを本当に感謝します。

おかげ

Answer 1

あなたはおそらくすでにこれを行う方法を考え出したので、私は他の誰かが同様の問題を持っている場合には投稿するつもりです。

あなたのコードを使用して、あなたは別の入力要素への新しい参照、新しいオートコンプリートオブジェクトを作成し、リスナーリストに追加する必要があります：

私は無名関数を削除して1を宣言お勧めします

var input2 = document.getElementById('frombox2'); 
var autocomplete2 = new google.maps.places.Autocomplete(input2); 
autocomplete2.bindTo('bounds', map); 
google.maps.event.addListener(autocomplete2, 'place_changed' function(){...}); 

2番目の検索ボックス機能で参照できるように名前を入力します。

ありがとう