Hinzufügen von anklickbaren Ergebnissen zu Google Maps Autocomplete

Question

Ich versuche benutzerdefinierte Ergebnisse zu Autocomplete hinzuzufügen und habe etwas Glück, aber ich kann die Ergebnisse nicht klickbar machen. Ein Links- oder Rechtsklick tut gar nichts. Betrachten Sie den folgenden Code ein:

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

Der neue Eintrag erscheint, sieht aus wie ein Link, aber nicht reagiert, wenn darauf geklickt. Irgendwelche Ideen, wie man das schafft?

Answer 1

Mit Blick auf die Google Maps JS Demo scheint es, dass Sie eine Methode fehlen, um das bevorzugte Ansichtsfenster auf der Karte zu definieren, um den Ort anzuzeigen. Sie müssen Code hinzufügen, wo es etwas tun wird, ob es einen Ort abrufen konnte oder nicht.

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

Hier ist another example als Referenz.