Géolocalisation Google Maps avec PHP/AJAX

4 messages   •   Page 1 sur 1
Modérateur PHPfrance
Modérateur PHPfrance | 2570 Messages

25 août 2012, 01:15

L'objectif de ce tuto est de présenter d'une manière simple comment utilise les api google maps avec PHP/Ajax.

La présentation se fera à travers un exemple simple :
1. Au niveau serveur PHP, un programme consulte l'api google maps en soumettant une requête http de type :
à cette requête google retourne un tableau JSON dont le contenu est structuré comme suit :
Image
image obtenue sur le site: http://blog.ippon.fr/2012/04/04/google- ... t-le-rest/

Par exemple, si on exécute la requête http suivante qui recherche les coordonnées géo des sites de GOOGLE:
cela donne les données suivantes en retour:
{
"results" : [
{
"address_components" : [
{
"long_name" : "Google Inc",
"short_name" : "Google Inc",
"types" : [ "point_of_interest", "establishment" ]
},
{
"long_name" : "110",
"short_name" : "110",
"types" : [ "street_number" ]
},
{
"long_name" : "Willits St",
"short_name" : "Willits St",
"types" : [ "route" ]
},
{
"long_name" : "Birmingham",
"short_name" : "Birmingham",
"types" : [ "locality", "political" ]
},
{
"long_name" : "Oakland",
"short_name" : "Oakland",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "Michigan",
"short_name" : "MI",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "United States",
"short_name" : "US",
"types" : [ "country", "political" ]
},
{
"long_name" : "48009",
"short_name" : "48009",
"types" : [ "postal_code" ]
},
{
"long_name" : "3313",
"short_name" : "3313",
"types" : []
}
],
"formatted_address" : "Google Inc, 110 Willits St, Birmingham, MI 48009, USA",
"geometry" : {
"location" : {
"lat" : 42.5476590,
"lng" : -83.2161610
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 42.55587870,
"lng" : -83.20015359999999
},
"southwest" : {
"lat" : 42.53943820,
"lng" : -83.23216839999999
}
}
},
"types" : [ "point_of_interest", "establishment" ]
},
{
"address_components" : [
{
"long_name" : "Google",
"short_name" : "Google",
"types" : [ "establishment" ]
},
{
"long_name" : "Hitech City",
"short_name" : "Hitech City",
"types" : [ "sublocality", "political" ]
},
{
"long_name" : "Hyderabad",
"short_name" : "Hyderabad",
"types" : [ "locality", "political" ]
},
{
"long_name" : "Ranga Reddy",
"short_name" : "R.R. District",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "Andhra Pradesh",
"short_name" : "Andhra Pradesh",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "India",
"short_name" : "IN",
"types" : [ "country", "political" ]
}
],
"formatted_address" : "Google, Hitech City, Hyderabad, Andhra Pradesh, India",
"geometry" : {
"bounds" : {
"northeast" : {
"lat" : 17.4482340,
"lng" : 78.37751639999999
},
"southwest" : {
"lat" : 17.4475430,
"lng" : 78.37686730
}
},
"location" : {
"lat" : 17.44792160,
"lng" : 78.3772010
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 17.44923748029150,
"lng" : 78.37854083029151
},
"southwest" : {
"lat" : 17.44653951970850,
"lng" : 78.37584286970849
}
}
},
"types" : [ "establishment" ]
}
],
"status" : "OK"
}
Pour réussir un tel appel http en PHP au format json comme spécifié dans l'url google et sans format html (corps html), il faut tout simplement utiliser une fonction de lecture d'url (URL FOPEN) comme file_get_contents() ou fopen() ou utiliser la technique CURL. Cela peut s'écrire comme ça en PHP:
Page : geocoder.google.serveur.php
<?php
# entrer une adresse à chercher avec google maps
$adresse = isset($_GET['adresse'])?$_GET['adresse']:'google';

# démarrer google maps et afficher le tableau json contenant les données de géolocalisation de l'adresse
$url = sprintf("http://maps.googleapis.com/maps/api/geocode/json?address=%s&sensor=false", htmlentities(urlencode($adresse)));
echo (file_get_contents($url));
?>
Cette méthode d'ouverture de l'url distante exige que le paramètre de configuration PHP : URL FOPEN soit activé sinon il faut remplacer cette lecture par la méthode CURL.

Pour récupérer les données retournées par le service google maps et les exploiter on peut utiliser une procédure AJAX qui peut réaliser l'appel du serveur php et utiliser json pour accéder aux données et les utiliser.

Dans la suite de cet exemple, je vais montrer comme réaliser cet appel Ajax et exploiter les données retournée par google maps pour afficher la carte google maps de l'adresse recherchée ainsi que la vue de caméra streetViewer du lieu positionné.

Pour cela on va coder dans une page HTML qu'on va nommer : geocoder.google.ajax.htm qui contiendra les zones suivantes:
  • 1. une zone de texte (input) pour saisir l'adresse recherchée
    2. un bouton qui va déclencher l'appel Ajax du programme PHP précédent : geocoder.google.serveur.php en lui passant le paramètre adresse saisie
    3. la procédure Ajax va donc récupérer les résultats de géolocalisation et les afficher dans un DIV pour information, ensuite, elle remplira une liste déroulante avec les adresses complètes trouvées par google maps.
    4. quand un choisira une adresse dans la liste remplie dans l'étape 3, une procédure javascript utilisant l'api google maps Geocoder permettant de tracer une carte google du lieu correspondant à l'adresse choisie avec un marqueur central, une bulle d'information du lieu et une vue caméra du streetViewer du lieu trouvé. La carte et le streetviewer seront logés dans deux DIV prévus pour ça.
Voici donc le programme : geocoder.google.ajax.htm
<html>
<head>
	<title>Application Google Maps</title>
	<!-- Cette page utilise JQUERY -->
	<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function(){ 
		/* programme de démarrage */
		/* gestion des événments de l'interface utilisateur */
		$('#adresse').keydown(function(event) {
			/* entrée dans la zone d'adresse */
			if(event.which==13){getGoogleAddress(event);}
		});
		/* click sur bouton de recherche adresse */
		$('#btn_chercher_adresse').click(getGoogleAddress);
		/* changement de la liste des adresses */
		$('#liste_adresses').change(loadGoogleMaps);
	});
	/* recherche des données de géolocalisation d'une adresse donnée */
	function getGoogleAddress(event){ 
		//init zones de travail
		$('#result').html(''); $('#liste_adresses').get(0).options.length=0;
		//ajax: recevoir les données de géolocalisation de l'adresse recherchée à partir du serveur PHP
		$.get('geocoder.google.serveur.php', {adresse:$('#adresse').val()}, function(data){
			/* data : tableau json contenant la réponse du serveur PHP */
			/* sa stucture est : {status: texte de l'état d'erreur, results: tableau contenant les données de géolocation} */
			if (data.status != 'OK'){
				alert(data.status);
			} else {
				/* récupérer les données de géolocation du tableau data.results dont la structure d'une ligne est la suivante  : */
				/* . address_components: { types, long_name} => liste de propriétés contenant : route, locality, administrative_area_level_2, administrative_area_level_1 , country, postal_code */
				/* . Formatted address => adresse complète */
				/* . Type address => le type d'adresse exemple : route */
				/* . Partial Match => true/false */
				/* . Location Type => type de la position de l'adresse exemple : GEOMETRIC_CENTER */
				/* . Location Lat => latitude géo */
				/* . Location Lng => longitude géo */
				/* . Bounds NorthEast => lat/lng Nord-est du cadre de la carte */
				/* . Bounds SouthWest => lat/lng Sud-ouest du cadre de la carte */
				/* . Viewport NorthEast => lat/lng Nord-est du cadre visible */
				/* . Viewport SouthWest => lat/lng Sud-ouest du cadre visible */
				
				var result = '<pre>';
				for(var i in data.results){
					result += ('\n------------------------------------------\nAddress Components n°'+(parseInt(i)+1)+' :\n------------------------------------------\n');
					var element = data.results[i].address_components;
					for(var j in element){ 
						result += (element[j].types[0] + ' : ' + element[j].long_name+'\n');
					}
					result += ('Formatted address : ' + data.results[i].formatted_address+'\n');
					//ajouter l'adresse complète trouvée dans la liste des adresses
					var lastIndex = $('#liste_adresses').get(0).options.length;
					$('#liste_adresses').get(0).options[lastIndex] = new Option(data.results[i].formatted_address, data.results[i].formatted_address, false, false);
					//enregistrer les données latitude/longitude de géolocalisation de l'adresse pour les réutiliser plustard dans google maps et streetviewer
					$($('#liste_adresses').get(0).options[lastIndex] ).data('lat',data.results[i].geometry.location.lat);
					$($('#liste_adresses').get(0).options[lastIndex] ).data('lng',data.results[i].geometry.location.lng);
					//
					result += ('Type address  : ' + data.results[i].types[0]+'\n');
					result += ('Partial Match : ' + data.results[i].partial_match+'\n');
					result += ('Location Type : ' + data.results[i].geometry.location_type+'\n');
					result += ('Location Lat  : ' + data.results[i].geometry.location.lat+'\n');
					result += ('Location Lng  : ' + data.results[i].geometry.location.lng+'\n');
					if (data.results[i].geometry.bounds){
						result += ('\n---------------------\nBounds NorthEast :\n---------------------\n');
						result += ('Lat  : ' + data.results[i].geometry.bounds.northeast.lat+'\n');
						result += ('Lng  : ' + data.results[i].geometry.bounds.northeast.lng+'\n');
						result += ('\n---------------------\nBounds SouthWest :\n---------------------\n');
						result += ('Lat  : ' + data.results[i].geometry.bounds.southwest.lat+'\n');
						result += ('Lng  : ' + data.results[i].geometry.bounds.southwest.lng+'\n');
					}
					if (data.results[i].geometry.viewport){
						result += ('\n---------------------\nViewport NorthEast :\n---------------------\n');
						result += ('Lat  : ' + data.results[i].geometry.viewport.northeast.lat+'\n');
						result += ('Lng  : ' + data.results[i].geometry.viewport.northeast.lng+'\n');
						result += ('\n---------------------\nViewport SouthWest :\n---------------------\n');
						result += ('Lat  : ' + data.results[i].geometry.viewport.southwest.lat+'\n');
						result += ('Lng  : ' + data.results[i].geometry.viewport.southwest.lng+'\n');
					}
				}
				result += '</pre>';
				//afficher les données dans le div result
				$('#result').html(result);
				//déclencher une mise à jour de la liste des adresses
				$('#liste_adresses').change();
			}
		},'json');
	}
	</script>
	
	<!-- Le code suivant provient avec quelques adaptations du site : applications-google-maps.com/appli-GM-introduction.php -->
	<!-- il exige l'accès aux apis de google maps en utilisant une clé (key) que vous devez obtenir avec votre compte GMAIL -->
	<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAFw0lDRKsdCra15LPvIxvehS3Kl_ZRrzIrsFqDz8GBXIeW1O52xQh3P31Xg2eTvqFRAyuOMY4dQrRQw" type="text/javascript"></script>
	<script type="text/javascript">	
	//<![CDATA[
		/* affichage de la carte google maps ainsi que la caméra du streetviewer */
		function loadGoogleMaps() {
			// l'adresse provenant de la liste des adresses nécessaire pour afficher google maps
			var adresse = $('#liste_adresses option:selected').val();
			//latitude et longitude nécessaires pour la caméra du streeviewer
			var lat = $('#liste_adresses option:selected').data('lat');
			var lng = $('#liste_adresses option:selected').data('lng');
			//vidage des div map et streetviewer 
			$('#map').html('');$('#streetViewer').html('');
			//
			if (GBrowserIsCompatible()){
				///////////////////
				/* GOOGLE MAPS  */
				//////////////////
				//objet google maps pointant sur le div map
				var map = new GMap2(document.getElementById("map"));

				// Recherche des coordonnées google maps de l'adresse
				var geocoder = new google.maps.ClientGeocoder();
				geocoder.getLatLng(adresse, function (coord){
					// centrage de la map sur les coordonnées renvoyées par Google maps
					map.setCenter(coord, 15);
					// Affichage du marker de position (déplaçable=true)
					map.addOverlay(new GMarker(coord,{draggable: true}));
					// Affichage de la bulle d'information de la position
					map.openInfoWindowHtml(coord,adresse);
				});
				// ajout de la propriété d'affichage des boutons "type de carte" (3 boutons par défaut)
				map.addControl(new GMapTypeControl());
				// ajout de la propriété ajout d'un bouton "type de carte" (Relief)
				map.addMapType(G_PHYSICAL_MAP);
				// ajout de la propriété zoom à la carte "map"
				map.addControl(new GSmallMapControl);
				// ajout de la propriété de control du zoom à l'aide de la roulette de souris
				map.enableScrollWheelZoom();
				///////////////////
				/* STREET VIEWER */
				//////////////////
				// Coordonnées  de la caméra
				var CoordCamera = new GLatLng(lat, lng);
				// yaw : orientation de l'azimute de la caméra
				// pitch : angle d'élévation de la caméra (un signe "-" indique que l'orientation verticale de la caméra est vers le haut)
				OrientCamera = { yaw:315.0,pitch:-0};
				panoramaOptions = { latlng:CoordCamera, pov:OrientCamera };
				// Le résultat est envoyé vers le div "streetViewer"
				MonPano = new GStreetviewPanorama(document.getElementById("streetViewer"), panoramaOptions);
				// Retourne un message d'erreur dans certains cas où l'image n'a pas été résolue
				GEvent.addListener(MonPano, "error", null);
			}
		}
		//]]>
	</script>
	<!-- STYLES DE LA PAGE -->
	<style>
	.adresse{ width:100% } 
	.adresse input{ width:40%;  }  
	#map{ width:100%; height:100%; }
	#streetViewer{ width:100%; height:100%;  }
	#result{ width:100%; height:100%; }
	</style>
</head>
<body>
	<div class="adresse">
		Adresse recherch&eacute;e:<br/><input id="adresse" />
		<select id="liste_adresses"><option></option></select>
		<button id="btn_chercher_adresse">Maps</button>
	</div>
	<div id="map"></div>
	<div id="streetViewer"></div>
	<div id="result"></div>
</body>
</html>
Et voilà. Pour tester ces programmes il faut démarrer par la page : http://localhost/test/geocoder.google.ajax.htm saisir un mot-clé d'une adresse recherchée comme : google par exemple puis cliquer sur le bouton "Maps". La liste d'adresses correspondant à la recherche sera rempli et une carte google maps de la première adresse de la liste sera automatiquement affichée ainsi que sa vue StreetViewer si ellle existe. Et enfin une liste d'informations sur la géolocalisation sera affichée en bas de la page.

Bonne lecture :wink:
--------//////----//---//----//////
-------//---//----//---//----//---//
------//////----//////-----//////
-----||--------||--||---||
Prendre le recul n'est pas une perte de temps.


ps: Affrontez moi dans l'arène

ViPHP
ViPHP | 5462 Messages

25 août 2012, 04:34

Tout ça est beaucoup plus simple avec la V3, pas besoin de passer par du PHP
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
[javascript]
var geocoder = new google.maps.Geocoder();
geocoder.geocode({"address': 'test"}, function (result) {
$("#liste_adresses").html('');

result.forEach(function (data) {
var option = new Option(data.formatted_address);

$(option).data("lat", data.geometry.location.lat());
$(option).data("lng", data.geometry.location.lng());

$("#liste_adresses").append(option);
});
});[/javascript]

Simple aussi pour la map

[javascript]var options = {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), options);

$("#liste_adresses").change(function (event) {
var data = $("#liste_adresses option:selected").data();
map.setCenter(new google.maps.LatLng(data.lat, data.lng));
map.setZoom(12);
});[/javascript]

Modérateur PHPfrance
Modérateur PHPfrance | 2570 Messages

25 août 2012, 15:56

+1 stealth35, Merci.
--------//////----//---//----//////
-------//---//----//---//----//---//
------//////----//////-----//////
-----||--------||--||---||
Prendre le recul n'est pas une perte de temps.


ps: Affrontez moi dans l'arène

Modérateur PHPfrance
Modérateur PHPfrance | 2570 Messages

26 août 2012, 02:56

Voici une version compatible avec la version V3 comme l'a suggéré stealth35. J'ai ajouté un dessinateur de trajet avec lignes, marqueurs et infobulles sur pointage de la souris. La distance des segments et du trajet est aussi calculée selon la position géo lat/lng.

Nom de la page: recherche.google.maps.htm
<html>
<head>
        <title>Application Google Maps</title>
        <!-- Cette page utilise JQUERY et les API GOOGLE MAPS-->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script type="text/javascript">
			$(document).ready(function(){
				/* programme de démarrage */
			   
				/* entrée dans la zone d'adresse */
				$('#adresse').keydown(function(event) {
						if(event.which==13){getGoogleAddress(event);}
				});
			   
				/* click sur bouton de recherche adresse */
				$('#btn_chercher_adresse').click(function(event) {getGoogleAddress();});
			   
				/* changement de la liste des adresses */
				$('#liste_adresses').change(function(event) {loadGoogleMaps();});
			   
				/* click sur bouton de supprimer trajet */
				$('#btn_supprimer_trajet').click(function(event) {supprimerTrajets();});    
			});
		   
			/* recherche des données de géolocalisation d'une adresse donnée */
			function getGoogleAddress(event){
				//recevoir les données de géolocalisation de l'adresse recherchée à partir de google.maps.Geocoder
				var geocoder = new google.maps.Geocoder();
				geocoder.geocode({'address': $('#adresse').val()}, function (result) {
					//init zones de travail
					$("#liste_adresses").html(''); $('#geoInfo').html(''); var geoInfo = '<pre>'; var i=1;
					console.log("result: "); console.log(result);
					result.forEach(function (data) {
						console.log("data: "); console.log(data);
						/* data : tableau json contenant la réponse result */
						/* sa stucture est :  */
						/* . address_components: { types, long_name} => liste de propriétés contenant : route, locality, administrative_area_level_2, administrative_area_level_1 , country, postal_code */
						/* . Formatted address => adresse complète */
						/* . Type address => le type d'adresse exemple : route */
						/* . Partial Match => true/false */
						/* . Location Type => type de la position de l'adresse exemple : GEOMETRIC_CENTER */
						/* . Location Lat => latitude géo */
						/* . Location Lng => longitude géo */
						/* . Bounds ca.b/ea.b => lat/lng Nord-est du cadre de la carte */
						/* . Bounds ca.f/ea.f => lat/lng Sud-ouest du cadre de la carte */
						/* . Viewport ca.b/ea.b => lat/lng Nord-est du cadre visible */
						/* . Viewport ca.f/ea.f => lat/lng Sud-ouest du cadre visible */

						geoInfo += ('\n------------------------------------------\nAddress Components n°'+(parseInt(i))+' :\n------------------------------------------\n');
						var element = data.address_components;
						for(var j in element){
								geoInfo += (element[j].types[0] + ' : ' + element[j].long_name+'\n');
						}
						geoInfo += ('Formatted address : ' + data.formatted_address+'\n');
						//ajouter l'adresse complète trouvée dans la liste des adresses
						var option = new Option(data.formatted_address);
						$(option).data("lat", data.geometry.location.lat());
						$(option).data("lng", data.geometry.location.lng());
						$("#liste_adresses").append(option);
						//
						geoInfo += ('Type address  : ' + data.types[0]+'\n');
						geoInfo += ('Partial Match : ' + data.partial_match+'\n');
						geoInfo += ('Location Type : ' + data.geometry.location_type+'\n');
						geoInfo += ('Location Lat  : ' + data.geometry.location.lat()+'\n');
						geoInfo += ('Location Lng  : ' + data.geometry.location.lng()+'\n');
						
						//next data
						i++;
					});
					geoInfo += '</pre>';
					//afficher les données dans le div geoInfo
					$('#geoInfo').html(geoInfo); 
					//déclencher une mise à jour de la liste des adresses
					$('#liste_adresses').change();                 
				});
			}
		   
			/* Affichage de google Maps */
			var map;
			var infoWindow;
			function loadGoogleMaps() {
					//vider le div map
					$('#map').html('');
				   
					//creation et affichage de la carte google maps avec la position de l'adresse sélectionnée
					var data = $("#liste_adresses option:selected").data();
					var coord = new google.maps.LatLng(data.lat, data.lng);
					var options = {  
									mapTypeId: google.maps.MapTypeId.ROADMAP,
									center: coord,
									zoom: 16
					};
					map = new google.maps.Map(document.getElementById('map'), options);
				   
					//marqueur de position utilisé
					var imageMarqueur = new google.maps.MarkerImage('http://maps.google.com/mapfiles/kml/pal2/icon13.png',
							new google.maps.Size(32, 32),
							new google.maps.Point(0,0),
							new google.maps.Point(16, 32));
					var ombreMarqueur = new google.maps.MarkerImage('http://maps.google.com/mapfiles/kml/pal2/icon13s.png',
							new google.maps.Size(56, 32),
							new google.maps.Point(0,0),
							new google.maps.Point(16, 32));
				   
					//affichage du marker de position
					var markerPositionAdresse = new google.maps.Marker({
							position: coord,
							map: map,
							title: $('#liste_adresses option:selected').val(),
							icon: imageMarqueur,
							shadow: ombreMarqueur,
					});
				   
					//info bulle de position
					infowindow = new google.maps.InfoWindow();
					infowindow.setContent($('#liste_adresses option:selected').val());
					infowindow.setPosition(coord);
					infowindow.open(map,markerPositionAdresse);
				   
					//options pour le traçage des lignes de trajet
					var polylineOptions = {
							strokeColor: '#000000',
							strokeOpacity: 1.0,
							strokeWeight: 1
					}
					//objet pour tracer les lignes du trajet
					trajet = new google.maps.Polyline(polylineOptions);
					trajet.setMap(map);

					//ajouter un listener pour dessiner les lignes trajet
					google.maps.event.addListener(map, 'click', ajouterPointTrajet);//permet de dessiner les lignes trajet audessus de la map
					google.maps.event.addListener(markerPositionAdresse, 'click', ajouterPointTrajet);//permet de connecter d'autres lignes audessus de ce marker
			}
		   
			/* fonction d'ajout de point de trajet */
			var trajet; var trajet_markers=[];      var distances_trajet = [];     
			//
			function ajouterPointTrajet(event) {
					//voici la liste des lignes trajet
					var listeLignesTrajet = trajet.getPath();
				   
					//ajouter une ligne ayant les coordonnées de la position cliquée (event)
					listeLignesTrajet.push(event.latLng);
					var nbre_lignes = listeLignesTrajet.getLength();
				   
					//calculer distance du nouveau segment
					var  pointPrecedent = nbre_lignes>1 ? listeLignesTrajet.getAt(nbre_lignes-2) : null;
					var distance = 0;
					if (pointPrecedent){
							var latP1 = pointPrecedent.lat(); var lngP1 = pointPrecedent.lng();
							var latP2 = event.latLng.lat(); var lngP2 = event.latLng.lng();
							//
							distance = calculerDistanceKm(latP1,lngP1, latP2,lngP2);
							distances_trajet.push(distance);
					}
				   
					// ajouter un marker sur le point de la position cliquée (event)
					var marker = new google.maps.Marker({
							position: event.latLng,
							title: '#' + nbre_lignes + ': ' + event.latLng.toString() + (distance>0 ? '\n Distance du point précédent: '+ distance+' km' : '') + '\n Distance totale trajet: '+distanceTrajet()+' km',
							icon: {
									path: google.maps.SymbolPath.CIRCLE,
									scale: 4
							},
							map: map
					});
				   
					//ajouter ce marker à la liste des markers du trajet
					trajet_markers.push(marker);
					google.maps.event.addListener(marker, 'click', ajouterPointTrajet); //permet de connecter d'autres lignes audessus de ce marker
				   
					/*
					//ajouter une info bulle par point du trajet
					infowindow = new google.maps.InfoWindow();
					infowindow.setContent('<div id="infoBulleTrajet">N°' + nbre_lignes  + ': Trajet total: '+distanceTrajet()+' km</div>');
					infowindow.setPosition(event.latLng);
					infowindow.open(map,marker);
					*/
			}
		   
			/* fonction de suppression des points du trajet */
			function supprimerTrajets(){
					//supprimer les lignes du trajet
					if (trajet) {
							var listeLignesTrajet = trajet.getPath();
							for (i in listeLignesTrajet) {
							  listeLignesTrajet.removeAt(i); //supprimer ligne
							}
					}
					//supprimer les markers des points du trajet
					if (trajet_markers) {
							for (i in trajet_markers) {
							  trajet_markers[i].setMap(null); //déttacher le marker de la map
							}
							trajet_markers.length = 0; //vider le tableau
					}
					//supprimer les distances du trajet
					distances_trajet.length = 0; //vider le tableau
			}
		   
			/* fonction qui renvoi la distance totale d'un trajet */
			function distanceTrajet(){
					var d = 0;
					if (distances_trajet){
							for(i in distances_trajet){
									d += distances_trajet[i];
							}
					}
					return d.toFixed(3);
			}
		   
			/* fonction de calcul de la distance entre 2 points géo(lat,lng) */
			function calculerDistanceKm(latP1,lngP1, latP2,lngP2){
					a=eval(latP1);
					b=eval(lngP1);
					c=eval(latP2);
					d=eval(lngP2);
					//
					e=(3.14159265358979*a/180);
					f=(3.14159265358979*b/180);
					g=(3.14159265358979*c/180);
					h=(3.14159265358979*d/180);
					i=(Math.cos(e)*Math.cos(g)*Math.cos(f)*Math.cos(h)+Math.cos(e)*Math.sin(f)*Math.cos(g)*Math.sin(h)+Math.sin(e)*Math.sin(g));
					j=(Math.acos(i));
					k=round(6371*j); //km
					l=round(k/1.852); //milles nautiques
					return k;
			}
			function round(number,X) {
					X = (!X ? 3 : X);
					return Math.round(number*Math.pow(10,X))/Math.pow(10,X);
			}
        </script>
        <!-- STYLES DE LA PAGE -->
        <style>
                .adresse{ width:100% }
                .adresse input{ width:40%;  }  
				#map{ width:100%; height:100%; line-height:normal; }
                #geoInfo{ width:100%; height:100%; border:solid 1px;}
                #infoBulleTrajet {
					font-family: "Comic Sans MS", cursive;
					font-size: 10px;
					border-top-width: 0px;
					border-right-width: 0px;
					border-bottom-width: 0px;
					border-left-width: 0px;
					border-top-style: none;
					border-right-style: none;
					border-bottom-style: none;
					border-left-style: none;
					letter-spacing: normal;
					text-align: center;
					vertical-align: middle;
					word-spacing: normal;
                }
        </style>
</head>
<body>
        <div class="adresse">
                Adresse recherch&eacute;e:<br/><input id="adresse" />
                <select id="liste_adresses"><option></option></select>
                <button id="btn_chercher_adresse">Rechercher</button>
                <button id="btn_supprimer_trajet">Supprimer trajet</button>
        </div>
        <div id="map"></div>
        <div id="geoInfo"></div>
</body>
</html>
(mise à jour le 10/03/2013)
Enjoy.
--------//////----//---//----//////
-------//---//----//---//----//---//
------//////----//////-----//////
-----||--------||--||---||
Prendre le recul n'est pas une perte de temps.


ps: Affrontez moi dans l'arène

4 messages   •   Page 1 sur 1