Created
March 11, 2011 09:05
-
-
Save Lheurt/865652 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="fr"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Exemple GoogleMaps v3</title> | |
</head> | |
<body> | |
<div id="gmap-div" style="width: 500px; height: 400px;"></div> | |
<span style="font-style: italic; font-size: 12px;">Saisissez des villes une par une pour tracer un itinéraire:</span> | |
<form id="search-form" action="#"> | |
<input type="text" id="search-query" size="30" /> | |
<input type="submit" value="chercher" /> | |
<span id="total-length" style="color: blue; font-size: 12px;"></span> | |
</form> | |
<!-- jQuery est ici dans l'unique but d'améliorer la lisibilité du code pour mettre en avant l'api GoogleMaps --> | |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> | |
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script> | |
<script type="text/javascript"> | |
$(function() { | |
//J'utilise dans l'exemple jQuery pour améliorer la lisibilité du code, le focus étant sur GoogleMaps | |
//tout d'abord on définit le centre de notre map par sa latitude et longitude, par exemple Montpellier: | |
var latLng = new google.maps.LatLng(43.60, 3.88); | |
//puis on créé la map | |
var gmap = new google.maps.Map(document.getElementById('gmap-div'), { | |
zoom: 10, //le zoom de départ | |
center: latLng, //le centre de la map au chargement | |
mapTypeId: google.maps.MapTypeId.ROADMAP, //le type de map, ROADMAP correspond à la version par défaut des versions précédentes | |
streetViewControl: false, //si on souhaite désactiver les contrôle StreetView | |
panControl: false //si on souhaite masquer les contrôles de déplacement | |
}); | |
//on créé un geocoder qui s'occupera des requètes de géolocalisation | |
var geocoder = new google.maps.Geocoder(); | |
//la ligne qui va tracer notre itinéraire | |
var polyline = new google.maps.Polyline({ | |
strokeColor: '#2222FF', //on définit la couleur | |
strokeOpacity: 0.5, //l'opacité | |
strokeWeight: 3, //l'épaisseur du trait, | |
map: gmap //la map à laquelle rattacher la polyline | |
}); | |
//on peut extraire un objet renfermant tous les points d'une Polyline | |
//cet objet nous sera utile pour calculer la distance de l'itinéraire | |
var path = polyline.getPath(); | |
//bounds renferme les limites de la map | |
var bounds = new google.maps.LatLngBounds(); | |
$('#search-form').submit(function(e) { | |
e.preventDefault(); | |
//l'objet request que l'on passe au geocoder | |
var request = { | |
address: $('#search-query').val(), | |
region: 'fr', //pour améliorer la qualité des résultats en précisant que l'on cherche principalement en France | |
language: 'fr' | |
}; | |
//aucune requète ajax nécessaire ! | |
geocoder.geocode(request, function(results, status) { | |
if (status == 'OK' && results.length) { | |
//on récupère les coordonnées du premier résultat | |
var lat = results[0].geometry.location.lat(); | |
var lng = results[0].geometry.location.lng(); | |
//puis on recentre la map... | |
var newCenter = new google.maps.LatLng(lat, lng); | |
gmap.setCenter(newCenter); | |
//...et on pose un marqueur dessus | |
new google.maps.Marker({ | |
position: newCenter, | |
map: gmap | |
}); | |
//on ajoute le nouveau point à notre path, le Polyline associé se met automatiquement à jour | |
path.push(newCenter); | |
//on affiche la longueur du path dans notre div | |
//c'est ici qu'intervient la librairie Geometry, qui va gérer automatiquement tous les calculs nécessaires | |
var pathLength = parseInt(google.maps.geometry.spherical.computeLength(path)) / 1000; | |
//computeLength nous renvoie des mètres que l'on transforme en kilomètres | |
//on met à jour l'affichage | |
$('#total-length').html(pathLength + ' km'); | |
//on étend la zone "bounds" en lui demandant d'inclure le nouveau point | |
bounds.extend(newCenter); | |
//on demande en suite à la map de s'adapter à cette zone | |
gmap.fitBounds(bounds); | |
} else { | |
console.log('aucun résultat'); | |
} | |
}); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment