API google map V3

TYBMHI · 28 Juillet 2015

Bonjour à tous !

Avant toute chose, je suis une grosse bille en Javascript...

Cela fait des jours et des jours que je tente de faire un script en utilisant l'api V3 de google Map.

Ce script doit pouvoir me donner l'adresse (pays, département, ville et CP) du client à partir de ses coordonnées géographiques. J'y arrive mais uniquement en cliquant sur le bouton "Obtenir la ville..." qui fait appel à la fonction "retrieve". Je ne sais pas comment faire pour obtenir ces informations dès que le client arrive sur la page, sans cliquer sur ce bouton. Finalement, je voudrais que la fonction "retrieve" s'exécute dès l'ouverture de la page. Je pense que c'est un truc très bête, mais là je bloque totalement depuis très longtemps ! Merci d'avance pour votre aide.



<script type="text/javascript">


  /* Déclaration des variables  */

  var geocoder;

  var map;

  var infowindow = new google.maps.InfoWindow();

  var marker;


  /* Fonction d'initialisation de la map appelée au chargement de la page  */

  function initialize() {


  if(navigator.geolocation) {


	// Fonction de callback en cas de succès

	function affichePosition(position) {


		var infopos = "";

		infopos += position.coords.latitude +",";

		infopos += position.coords.longitude;

		document.getElementById('latlng').value = infopos;



		// On instancie un nouvel objet LatLng pour Google Maps

		var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);


		// Ajout d'un marqueur à la position trouvée

		var marker = new google.maps.Marker({

		     draggable : true,

			 autoPan:true,

			 position: latlng,

			 map: map


		});


		map.panTo(latlng);


	}


	// Fonction de callback en cas d’erreur

	function erreurPosition(error) {

		var info = "Erreur lors de la géolocalisation : ";

		switch(error.code) {

		case error.TIMEOUT:

			info += "Timeout !";

		break;

		case error.PERMISSION_DENIED:

			info += "Vous n’avez pas donné la permission";

		break;

		case error.POSITION_UNAVAILABLE:

			info += "La position n’a pu être déterminée";

		break;

		case error.UNKNOWN_ERROR:

			info += "Erreur inconnue";

		break;

		}


	}


	navigator.geolocation.getCurrentPosition(affichePosition,erreurPosition);


} else {


	alert("Ce navigateur ne supporte pas la géolocalisation");

}

    geocoder = new google.maps.Geocoder();

    var latlng = new google.maps.LatLng(48.8566667, 2.3509871);

    var myOptions = {

      zoom: 8,

      center: latlng,

      mapTypeId: google.maps.MapTypeId.ROADMAP

    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  }

  /* Fonction de géocodage inversé (en fonction des coordonnées de l'adresse)  */

  function codeLatLng(input) {

    var latlngStr = input.split(",",2);

    var lat = parseFloat(latlngStr[0]);

    var lng = parseFloat(latlngStr[1]);

    var latlng = new google.maps.LatLng(lat, lng);

    geocoder.geocode({'latLng': latlng}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {

        if (results[0]) {

          map.setZoom(11);

          marker = new google.maps.Marker({

            position: latlng,

            map: map

          });

          var elt = results[0].address_components;

          for(i in elt){

            if(elt[i].types[0] == 'postal_code')

            document.getElementById('cp').value = elt[i].long_name;

            if(elt[i].types[0] == 'locality')

            document.getElementById('adr').value = elt[i].long_name;

            if(elt[i].types[0] == 'administrative_area_level_2')

            document.getElementById('dpt').value = elt[i].long_name;

            if(elt[i].types[0] == 'country')

            document.getElementById('pays').value = elt[i].long_name;


          }

          infowindow.setContent(results[0].formatted_address);

          infowindow.open(map, marker);

          map.setCenter(latlng);         

        }

      } else {

        alert("Geocoder failed due to: " + status);

      }

    });

  }

  function retrieve(){

    var input = document.getElementById("latlng").value;

    codeLatLng(input);

  }

</script>

Et la partie HTML



<body onload="initialize()">

<div id="maposition" style="width:640px;text-align:center;color:red;margin:0px 0px 10px 0px;"></div>


    <div>

      latitude, longitude : <input id="latlng" type="text" value="">

     <input type="button" value="Obtenir la ville..." onclick="retrieve()">

      Ville / adresse : <input id="adr" type="text" value="">

      code postal : <input id="cp" type="text" value="">

      département : <input id="dpt" type="text" value="">

      pays : <input id="pays" type="text" value="">

    </div>


    <div id="map_canvas"></div>


  </body>

Modifié 28 Juillet 2015 par TYBMHI

sparh · 29 Juillet 2015

Bonjour,

dans ton code le script pour afficher l'adresse est appelé par



<input type="button" value="Obtenir la ville..." onclick="retrieve()">

Il suffit donc d'appeler la fonction retreive() au chargement de la page (une fois qu'on a géolocalisé l'utilisateur)

Voilà le nouveau javascript (il y a juste une nouvelle ligne sous map.panTo(latlng); )



<script type="text/javascript">


  /* Déclaration des variables  */

  var geocoder;

  var map;

  var infowindow = new google.maps.InfoWindow();

  var marker;


  /* Fonction d'initialisation de la map appelée au chargement de la page  */

  function initialize() {


  if(navigator.geolocation) {


	// Fonction de callback en cas de succès

	function affichePosition(position) {


		var infopos = "";

		infopos += position.coords.latitude +",";

		infopos += position.coords.longitude;

		document.getElementById('latlng').value = infopos;



		// On instancie un nouvel objet LatLng pour Google Maps

		var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);


		// Ajout d'un marqueur à la position trouvée

		var marker = new google.maps.Marker({

		     draggable : true,

			 autoPan:true,

			 position: latlng,

			 map: map


		});


		map.panTo(latlng);

		retrieve(); // tu peux qussi mettre codeLatLng(infopos);


	}


	// Fonction de callback en cas d’erreur

	function erreurPosition(error) {

		var info = "Erreur lors de la géolocalisation : ";

		switch(error.code) {

		case error.TIMEOUT:

			info += "Timeout !";

		break;

		case error.PERMISSION_DENIED:

			info += "Vous n’avez pas donné la permission";

		break;

		case error.POSITION_UNAVAILABLE:

			info += "La position n’a pu être déterminée";

		break;

		case error.UNKNOWN_ERROR:

			info += "Erreur inconnue";

		break;

		}


	}


	navigator.geolocation.getCurrentPosition(affichePosition,erreurPosition);


} else {


	alert("Ce navigateur ne supporte pas la géolocalisation");

}

    geocoder = new google.maps.Geocoder();

    var latlng = new google.maps.LatLng(48.8566667, 2.3509871);

    var myOptions = {

      zoom: 8,

      center: latlng,

      mapTypeId: google.maps.MapTypeId.ROADMAP

    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);



  }

  /* Fonction de géocodage inversé (en fonction des coordonnées de l'adresse)  */

  function codeLatLng(input) {

    var latlngStr = input.split(",",2);

    var lat = parseFloat(latlngStr[0]);

    var lng = parseFloat(latlngStr[1]);

    var latlng = new google.maps.LatLng(lat, lng);

    geocoder.geocode({'latLng': latlng}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {

        if (results[0]) {

          map.setZoom(11);

          marker = new google.maps.Marker({

            position: latlng,

            map: map

          });

          var elt = results[0].address_components;

          for(i in elt){

            if(elt[i].types[0] == 'postal_code')

            document.getElementById('cp').value = elt[i].long_name;

            if(elt[i].types[0] == 'locality')

            document.getElementById('adr').value = elt[i].long_name;

            if(elt[i].types[0] == 'administrative_area_level_2')

            document.getElementById('dpt').value = elt[i].long_name;

            if(elt[i].types[0] == 'country')

            document.getElementById('pays').value = elt[i].long_name;


          }

          infowindow.setContent(results[0].formatted_address);

          infowindow.open(map, marker);

          map.setCenter(latlng);         

        }

      } else {

        alert("Geocoder failed due to: " + status);

      }

    });

  }

  function retrieve(){

    var input = document.getElementById("latlng").value;

    codeLatLng(input);

  }


</script>

bonne journée

Modifié 29 Juillet 2015 par sparh

TYBMHI · 29 Juillet 2015

C'est génial !! Ca marche !! Je te remercie sincèrement Sparh. Merci beaucoup et bonne soirée !

Connexion

API google map V3

Sujets conseillés

TYBMHI

sparh

TYBMHI

Veuillez vous connecter pour commenter

Parcourir

Activité