L'API 'autocomplete' de Google Maps / Places peut-elle être utilisée via AJAX?
Je suis en train d'utiliser le Google Places de saisie semi-automatique de l'API pour pré-remplir un formulaire sur une application web avec la mise en place de données pour faciliter l'entrée de données. L'API est assez simple, mais il ne semble pas vouloir accepter le XHR.
$.getJSON("https://maps.googleapis.com/maps/api/place/autocomplete/json",{
input: input.term,
sensor: false,
types: 'establishment',
location: '40.01496,-105.27029',
radius: 10000,
key: Config.googleplaceskey
},function(places_response){
//Some other code.
});
J'obtiens ceci dans la console:
XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/autocomplete/json?input=At&sensor=false&types=establishment&location=40.01496%2C-105.27029&radius=10000&key=AIzaSyDKzUgcLklQE_U5494vHq_SzrFakNHugaQ. Origin http://localhost:8086 is not allowed by Access-Control-Allow-Origin.
Est ce de toute façon pas ce que l'API est destinée? Quelqu'un connais une solution, ou une sorte de paramètre supplémentaire(s) je pourrais envoyer pour le faire fonctionner?
Mise à jour:
Voici le lien vers la documentation de l'API pour cet appel. Le parent docs en fait de même avoir JavaScript JSON-l'analyse des exemples. Vraiment déroutant pourquoi ce serait l'arrêt sur le côté serveur.
http://code.google.com/apis/maps/documentation/places/autocomplete.html
source d'informationauteur woodardj | 2011-07-23
Vous devez vous connecter pour publier un commentaire.
Voici un extrait de code pour les futurs lecteurs qui viennent à travers ce scénario.
À l'aide de la "Place de l'API" plutôt que les "Maps API", cet extrait de code remplit mon formulaire éléments (y compris l'entrée qui est utilisé pour la saisie semi-automatique) avec les données renvoyées par Google.
Mettre un listener sur la saisie semi-automatique pour "place_changed" (ils ont choisi quelque chose de la liste), puis remplissez les entrées avec les données renvoyées.
Tout cela est répertorié sur la Place de la Bibliothèque de la page de Google.
Pour faire de la croix-domaine des appels AJAX comme cela, vous devez utiliser JSONP avec un rappel. Cependant, Google ne fournit pas une JSONP interface pour la saisie semi-automatique.
Vous pourriez être en mesure d'utiliser cette classe de saisie semi-automatique au lieu de cela, mais il ne semble pas possible pour le style de la liste déroulante.
MODIFIER Il y a peut être une façon de le faire. Découvrez la geo-autocomplete de jQuery Plugin. Il a deux les démos. Je n'ai pas donné ce bon look plus encore.
Il y a deux façons d'accéder à Google Maps de saisie semi-automatique de l'API.
La première est via le
google.cartes.des lieux.La saisie semi-automatique
classe. Cela fournit tout le nécessaire à la mise en œuvre en Javascript. Cependant, vous avez le contrôle complet sur le style. Utiliser lepac-container
etpac-item
classes CSS.La deuxième est par l'intermédiaire de la La Saisie Semi-Automatique De Service Web. Ce n'est pas accessible via le navigateur, car de même la politique de l'origine (il n'y a pas de JSONP API). C'est le moyen le plus souple pour accéder à la saisie semi-automatique des résultats.
Google sert probablement à cette API appelée uniquement par le biais de sa propre API Javascript qui vous charge de maps.google.com servi fichier Javascript. Le manque de Access-Control-Allow-Origin-tête indique que vous ne devez pas utiliser l'API autrement à l'aide de Javascript.
Sinon, vous pouvez simplement écrire un serveur proxy côté de la fonction qui appelle l'API Google et transmet le résultat avec impatience votre propre $.getJSON appel, mais ce serait probablement contre les Conditions de Service.
http://www.daniweb.com/web-development/php/code/216729
(disclaimer: je n'ai pas lu l'API spec pour cet appel de fonction)
Vous pouvez intercepter les JSONP résultats retournés par le google.cartes.des lieux.La saisie semi-automatique de la fonctionnalité et de les utiliser comme bon vous semble.
Fondamentalement, vous redéfinir la méthode appendChild sur l'élément de tête, puis de surveiller les éléments javascript que Google saisie semi-automatique de code à insérer dans le DOM pour JSONP. Comme javascript, des éléments sont ajoutés, vous remplacer le JSONP rappels Google définit afin d'obtenir l'accès à la crue de saisie semi-automatique des données.
C'est un peu un hack, va ici (je suis à l'aide de jQuery, mais il n'est pas nécessaire pour ce hack de travail):
C'est une croix de domaine demande. Les navigateurs par défaut bloquer les réponses de la croix de domaine des sites. Vous avez besoin d'utiliser jsonp comme le datatyoe. Juste google de la même et vous pouvez voir comment il peut être fait à l'aide de l'API jquery. Un débordement de pile a des questions autour de ces trop.
En vertu de la même origine, une page web à partir de server1.example.com normalement, ne peuvent pas se connecter ou de communiquer avec un serveur autre que server1.example.com. Une exception est l'élément HTML. Profitant de l'ouverture politique, pour les éléments, certaines pages de les utiliser pour récupérer le code Javascript qui fonctionne sur générées dynamiquement données au format JSON à partir d'autres origines. Cette consommation est connu comme JSONP.
Noter que Google Places est pas JSONP conformes j'ai donc utilisé les Lieux de Google API JavaScript à la place.
Des Lieux de la Bibliothèque à partir de Google Maps Javascript API:
Javascript Lieux De Saisie Semi-Automatique
Les Lieux de l'API est différente de la Maps API.
Vous pouvez contourner ce problème en utilisant PHP.
Dans votre script PHP, utiliser file_get_contents à la requête de l'URL comme ceci:
$suggestions = json_decode(file_get_contents('https://maps.googleapis.com/maps/api/place/autocomplete/json?input=blabla&sensor=false&types=establishment&radius=10000')
Vous pouvez ensuite il suffit d'utiliser une requête AJAX à votre script PHP qui permet de renvoyer les résultats de manière efficace en contournant la croix contrainte de domaine.