11487 sujets

JavaScript, DOM et API Web HTML5

[Résolu] API Google Map offline / online

Bonjour à tous

j'utilise l'api geocoder pour restituer une longitude et une latitude des adresses enregistrées dans ma base, puis m'afficher la carte sur ma page web, jusqu'ici pas de problème.

Tout fonctionne parfaitement bien en local, ma carte s'affiche. Par contre dès que je suis sur un serveur en ligne, cela fonctionne un peu quand ça veut... je n'ai pourtant pas d'erreurs javascript, pas de conflits (cf console Firebug). Je sais que les requêtes sont limitées mais je n'ai pas appelé ma page 15000 fois...

Est-ce que cela aurait un rapport avec l'API KEY, que j'ai pourtant générée?
Si quelqu'un a déjà rencontré ce genre de problèmes, merci de vos retours.
Bonjour,

Je n'ai jamais rencontré ce problème. Je pencherais peut-être plutôt vers un souci dans ton script de construction de la carte via l'API mais il faudrait pouvoir vérifier tout ça…
As-tu une page en ligne ou pourrais-tu construire une petite page de test au moins pour tester la partie front/affichage de la carte (un projet jsfiddle fera normalement l'affaire) ? Peut-être une difficulté liée à ton hébergement.
Je ne peux pas vraiment mettre ça en ligne, c'est une appli crm avec des données sensibles.

Par contre je peux t'expliquer la routine.

je vais chercher mes coordonnées :

//API Google Geocoding
$search_address = $adresse1_geo.' '.$cp_geo.' '.$ville;
$geocoder = "http://maps.googleapis.com/maps/api/geocode/xml?address=%s&sensor=false";
$url_address = urlencode($search_address);
			
$query = sprintf($geocoder,$url_address);
$xml = simplexml_load_file($query);
$result = $xml->status;
			
if($result == 'OK') {
	$lat = $xml->result->geometry->location->lat;
	$lng = $xml->result->geometry->location->lng; ?>
	<script>
	$(document).ready(function() {
		init_map('<?php echo $lat;?>','<?php echo $lng;?>');
	});
	</script>
	<?php
	}
	else {  ?>
		<script>
		$(document).ready(function() {
		$("#map").hide();
	       });
	      </script>
<?php
} ?>


puis ma fonction qui initialise la carte, qui s'affiche si mon retour est ok:

function init_map(lat,lng) {
	var latlng = new google.maps.LatLng(lat,lng);
    var options = {
		center: latlng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
                
    var carte = new google.maps.Map(document.getElementById("map"), options);

	var marqueur = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        map: carte
    });
}

Modifié par Pedrothelion (28 Jul 2014 - 15:13)
Après quelques tests, c'est l'initialisation de l'affichage de ma carte qui n'est pas bonne.
je dois executer ma fonction sur un onload par exemple.
Problème rencontré précédemment : retour de google map affichant OVER_QUERY_LIMIT, alors que le quota est loin d'être dépassé, problème évoqué dans d'autres posts sur d'autres forums

Voici donc la solution la plus appropriée dans mon cas pour afficher une carte dynamiquement via google map, je ne mets pas les coordonnées en base sur cet exemple. J'utilise cette routine pour afficher une carte correspondante à l'adresse d'une société dans une application CRM. La carte s'affichant automatiquement au chargement de la page correspondante à la société, dans une div portant l'id map.

fiche.php

//votre chaîne addresse + code postal + ville
$search_address = $adresse.' '.$cp.' '.$ville;

<!-- API Google Geocoding -->
<script>
var geocoder = new google.maps.Geocoder();  
function geolocalise() {
	addr = "<?php echo $search_address;?>"; 
	// requête
	geocoder.geocode({'address': addr}, function(results, status) { 
	        // Si retour googlemap OK
	        if (status == google.maps.GeocoderStatus.OK) {
		        //on recupere la latitude et la longitude
                        latitude = results[0].geometry.location.lat();
		        longitude = results[0].geometry.location.lng();
		        //on execute la fonction init_map(), fonction sur un fichier.js externe par exemple
                        init_map(latitude,longitude);
	        }
	        else  {
                       //sinon je cache ma carte
		       $("#map").hide();
	       }
        });
}
//on execute la fonction
geolocalise();
</script>


Puis la fonction init_map(), la fonction de base pour générer une carte

function init_map(lat,lng) {
	var latlng = new google.maps.LatLng(lat,lng);
        var options = {
		center: latlng,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
        };
                
        var carte = new google.maps.Map(document.getElementById("map"), options);

	var marqueur = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        map: carte
    });
}
Sujet clos
Aller à