Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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&eacute;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
You can’t perform that action at this time.