Les API Google Maps ne fonctionnent pas en vue angulaire

J'essaie d'utiliser Google map apis afin d'obtenir une fonction de saisie semi-automatique simple pour une boîte de saisie "Placer". J'utilise le routage angulaire.Les API Google Maps ne fonctionnent pas en vue angulaire

En suivant les instructions pour les développeurs données par Google, dans le <head> du modèle principal que j'ai:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> 
<script src="js/googleAutocomplete.js"></script>

où googleAutocomplete.js est

function initializeGoogleApi() { 
    var input = document.getElementById('CityInput'); 
    var options = { 
     types: ['(cities)'] 
    }; 
    var autocomplete = new google.maps.places.Autocomplete(input, options); 
}

et dans l'un des points de vue que j'ai

<input id="CityInput" type="text" name="place" ng-model="profile.place">

Ce champ de saisie est supposé avoir autocomplé ete services de Google apis, mais cela ne fonctionne pas. Toutefois, si je place la zone de saisie dans le modèle principal (c'est-à-dire, pas dans la vue), la fonction de saisie semi-automatique fonctionne.

Je n'arrive pas à comprendre ce qui ne va pas dans la vue. J'ai essayé de mettre onload="initializeGoogleApi()" à la fois dans la balise body (modèle principal), et dans le div extérieur de la vue, sans succès.

Des suggestions? Merci!

Source

2014-09-05 ZzKr

Peut-être créer un plunker ou poster le code de travail minimal ici? – alpinescrambler

Le code HTML dans la vue n'est pas dans le DOM tant qu'il n'est pas sélectionné, de sorte que la zone de saisie n'existe pas lorsque les événements onload du corps sont déclenchés. entrée, dans initializeGoogleApi, est null ...

La surcharge ne fonctionne pas sur divs. Voir here.

La seule façon de le faire fonctionner était de mettre l'initialisation dans le contrôleur de cette route.

Source

2014-09-05 19:40:59 marneborn

Merci, maintenant je pense que je comprends le problème. A propos de mettre initialize dans le contrôleur, voulez-vous dire quelque chose comme: '$ scope.initialize = function() {...};' et l'appel: 'scope.initialize de $(); Si oui, comment sélectionneriez-vous le texte d'entrée? 'var input = document.getElementById ('CityInput');' ou peut-être d'utiliser 'ng-model'? – ZzKr

Je mets '$ scope.initialize = function() {...};', appelant '$ scope.initialize();' quand la vue est chargée. Je reçois la valeur autocompleted de la zone de saisie avec 'document.getElementById ('CityInput'). Value;'. Tout fonctionne parfaitement. – ZzKr

Les API Google Maps ne fonctionnent pas en vue angulaire

Répondre

Questions connexes