Lheurt/exemple_googlemaps_v3.html

## exemple_googlemaps_v3.html
<!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>
	<!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>