Google Mapsオートコンプリートにクリック可能な結果を​​追加する

Question

私はオートコンプリートにカスタム結果を追加しようとしていますが、運が少しありますが、結果をクリック可能にすることはできません。左クリックまたは右クリックは絶対に何もしません。次のコードを考えてみましょう：

<input type="text" name="query" id="query"> 
 
<script> 
 
    var input = (document.getElementById('query')); 
 
    var options = []; 
 

 
    city = new google.maps.places.Autocomplete(input, options); 
 

 
    google.maps.event.addListener(city, 'place_changed', function() { 
 

 
     place = city.getPlace(); 
 

 

 
    }); 
 

 
    $("#query").on('input', function() 
 
    { 
 
     append_places($("#query").val()); 
 
    }); 
 

 
    var new_pac = false; 
 
    function append_places(input) 
 
    { 
 
     if (!new_pac) 
 
     { 
 
      setTimeout(function() 
 
      { 
 
       $(".pac-container").append('<div id="new-pac""></div>'); 
 
      }, 1); 
 

 
      new_pac = true; 
 
     } 
 
     else 
 
     { 
 
      $('#new-pac').empty(); 
 
     } 
 

 
     $("#new-pac").append('<div class="pac-item areasearch"><a href="http://www.wherever.com">Foo</a><span class="pac-icon pac-icon-areas"></span><a class="pac-item-query" href="http://www.wherever.com">test</a></div>'); 
 

 
    } 
 

 
</script>

新しいエントリが、現れたリンクのように見えますが、クリックされたときには反応しません。これを実現させる方法に関するアイデアはありますか？

Answer 1

「Google Maps JS Demo」を見ると、マップ上に優先的なビューポートを定義して場所を表示する方法が不足しているようです。あなたは何かを行うかどうか、それは場所を取得することができなかったコードを追加する必要があります。

// If the place has a geometry, then present it on a map. 
if (place.geometry.viewport) { 
map.fitBounds(place.geometry.viewport); 
} 

参考のためにここにはanother exampleがあります。