Comment passer des appels AJAX interdomaines à l'API Google Maps?

Question

J'essaie de faire un appel jQuery $.getJSON au service Web de géocodage de Google Maps , mais cela ne fonctionne pas à cause de problèmes de sécurité entre domaines.

Je n'ai pas été en mesure de le comprendre en ligne, mais j'ai lu quelques mots sur l'API Google Javascript ou JSONP, mais jusqu'à présent, aucune réponse claire ...

Quelqu'un pourrait-il m'éclairer?

Merci!

Answer 1

Je peux voir aucun avantage en utilisant le côté Serveur de Géocodage Service Web lorsque Google Maps fournit toutes les fonctionnalités côté Client de Géocodage de l'API JavaScript.

Tout d'abord, automatiquement, cela résout ton origine du problème, et en plus les limites des demandes serait calculé par l'adresse IP du client au lieu de par l'adresse IP du serveur, ce qui peut faire une énorme différence pour un site populaire.

Voici un exemple très simple en utilisant le JavaScript de Géocodage de l'API v3:

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">     
   var geocoder = new google.maps.Geocoder();
   var address = 'London, UK';

   if (geocoder) {
      geocoder.geocode({ 'address': address }, function (results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
            console.log(results[0].geometry.location);
         }
         else {
            console.log("Geocoding failed: " + status);
         }
      });
   }    
</script>

Si pour une raison quelconque vous souhaitez utiliser le web côté serveur-service, vous pourriez mettre en place un système très simple proxy inverse, peut-être à l'aide de mod_proxy si vous utilisez Apache. Cela vous permettra d'utiliser des chemins relatifs pour vos requêtes AJAX, tandis que le serveur HTTP agit comme un proxy pour tous "à distance" de l'emplacement.

Les fondamentaux de la directive de configuration pour configurer un proxy inverse dans mod_proxy est la directive ProxyPass. Vous utilisez généralement comme suit:

ProxyPass     /geocode/     http://maps.google.com/maps/api/geocode/

Dans ce cas, le navigateur peut faire une demande d' /geocode/output?parameters mais le serveur va servir ce, en agissant comme un proxy pour http://maps.google.com/maps/api/geocode/output?parameters.

Answer 2

Voici un exemple très simple qui utilise la fonction document.ready () de jQuery pour appeler la fonction JS loadMap () pure. Il y a beaucoup de progrès à faire ici, mais j'espère que ce sera un bon début pour quelqu'un.

 <script type="text/javascript">
function loadMap (options) {

    // geocoder docs: http://code.google.com/apis/maps/documentation/geocoding/

    var geocoder = new google.maps.Geocoder();

    if (!geocoder) {
        if (options.onError)
            options.onError ('Failed to create geocoder');
        return;
    }

    geocoder.geocode ({
        address: options.address
        }, 
        function (results, status) {
            if (status != google.maps.GeocoderStatus.OK) {
                if (options.onError)
                    options.onError ('Geocoder response failed.');
                return;
            }

            if (!results.length) {
                if (options.onError)
                    options.onError ('Failed to locate address.');
                return;
            }

            var myOptions = {
                zoom: options.zoom,
                center: results[0].geometry.location,
                mapTypeId: options.mapType
            };

            var map = new google.maps.Map (document.getElementById (options.idDiv), myOptions);

            var marker = new google.maps.Marker ({
                position: results[0].geometry.location,
                map: map
            });
        }
    );
}

$(document).ready (function () {
    loadMap ({
        address: '1600+Amphitheatre+Parkway,+Mountain+View,+CA',
        idDiv: 'listing-map',
        zoom: 11,
        mapType: google.maps.MapTypeId.ROADMAP,
        onError: function (error) {
            $('##listing-map').html (error);
        }
    });
});
</script>
<style>
#listing-map {width:400px; height:400px}
</style>
<div id="listing-map"></div>