J'ai "écrit" un script permettant de géolocaliser une adresse grâce à l'API de Google Maps. Pour cela j'ai fait une page avec deux formulaires, un pour rentrer l'adresse et vérifier via une carte que c'est la bonne et l'autre pour valider les coordonnées récupérer par le premier formulaire.
J'aimerais d'abord savoir si le script à l'air "mauvais" ou pas. Je ne m'y connais pas en JavaScript encore.
D'autre part j'ai un problème. Dans geocode.js j'ai commenté deux lignes servant normalement à mettre à jour les coordonnées lorsqu'on déplace le marqueur sur la carte mais ça ne fonctionne pas (surement à cause de portée de variables). Comment contourner le problème ? Merci d'avance.
PS : ce code fonctionne uniquement en utilisant http://localhost/ (histoire de key pour l'API).
index.html :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API : Geocoding</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAnfs7bKE82qgb3Zc2YyS-oBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSySz_REpPq-4WZA27OwgbtyR3VcA" type="text/javascript"></script>
<script src="./geocode.js" type="text/javascript"></script>
<script type="text/javascript">
google.load("maps", "2", {"language" : "fr"});
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<p>Rentrez votre adresse entière. Exemple : <em>10 route de boncourt, 28260 Anet, france</em> ou <em>rabat, morrocco</em>.</p>
<noscript><p>Vous devez activer JavaScript.</p></noscript>
<form action="#" onsubmit="showLocation(); return false;">
<fieldset>
<p><label for="q">Trouver les coordonnées de votre ville :</label><br/>
<input type="text" name="q" id="q" value="" /> <input type="submit" name="find" value="(1) Rechercher" /></p>
<div id="map" style="width: 400px; height: 300px"></div>
</fieldset>
</form>
<form method="post" action="#">
<fieldset>
<p><input id="champlat" name="latitude" type="hidden" value="" />
<input id="champlong" name="longitude" type="hidden" value="" />
<input id="champq" name="q" type="hidden" value="" /></p>
<input name="update_location" value="(2) Enregistrer l'adresse" type="submit"/>
</fieldset>
</form>
</body>
</html>geocode.js :
Code : Tout sélectionner
var map;
var geocoder;
function initialize()
{
// Creation de la carte via Google Maps API v2
map = new google.maps.Map2(document.getElementById("map"));
// Centrage de la carte sur le monde
map.setCenter(new google.maps.LatLng(34, 0), 1);
// Permeter d'ajouter les mini-controles pour zommer/dezoomer
map.addControl(new google.maps.SmallMapControl());
// Initialise le client geocode
geocoder = new google.maps.ClientGeocoder();
}
// Fonction appellée si le geocoder renvoie une réponse !
// Il affiche un marqueur à l'endroit indique par l'adresse
// ainsi qu'une bulle info "Centre ville de l'adresse tapée"
function addAddressToMap(response)
{
// Efface le marqueur si il y en a un
map.clearOverlays();
if (!response || response.Status.code != 200)
{
alert("Desole, nous n'avons pas reussi a trouver les coordonnees correspondant cette adresse :"+place.address+". Verifier que vous avez bien ecrit le nom de la ville et du pays, sinon essayez avec le nom d'une ville plus grande.");
}
else
{
place = response.Placemark[0];
point = new google.maps.LatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
marker = new google.maps.Marker(point, {draggable : true});
google.maps.Event.addListener(marker, "dragend", function() {
// On essaye de remplir les champs du deuxième formulaire
//document.getElementById('champlat').value=place.Point.coordinates[1];
//document.getElementById('champlong').value=place.Point.coordinates[0];
});
map.addOverlay(marker);
map.setCenter(new google.maps.LatLng(place.Point.coordinates[1], place.Point.coordinates[0]), 9);
// On remplit les champs du deuxième formulaire
document.getElementById('champlat').value=place.Point.coordinates[1];
document.getElementById('champlong').value=place.Point.coordinates[0];
document.getElementById('champq').value=place.address;
}
}
function showLocation()
{
var address = document.forms[0].q.value;
// On géocode l'adresse
geocoder.getLocations(address, addAddressToMap);
}
:
: