Api google maps javascript

Résolu

momohuri Messages postés 198 Date d'inscription Statut Membre Dernière intervention -
momohuri Messages postés 198 Date d'inscription Statut Membre Dernière intervention - 25 oct. 2011 à 16:06

Bonjour,
je souhaite recupere la longitude et latitude par rapport a une addresse donnee. pour ca j utilise api google map.
j ai fait un truc du genre dans un form :
<script>
var geocode;
var geocoder= new google.maps.Geocoder();
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
var latlng =results[0].geometry.location;
document.write('loool <input type="hidden" name="latlng" value="' + latlng + '"><br />');

});
}
</script>

et avec <input type='button' value='sauvegarde' onclick='codeAddress()'/>

mais dans la page de recuperation je n ai jamais rien pour le $_POST['latlng']

Merci

Afficher la suite

5 réponses

anatolekadel Messages postés 112 Statut Membre 3

Dans un premier temps, voilà ce qu'il faut mettre dans ton <form>

<input name = "adress" id="address" type="text" size = "35" value="" ><input id="lat" name = "lat" type="hidden" value=""><input name = "lng" id="lng" type="hidden" value="">
    <input type="button" value="Geocoder" onclick="codeAddress()">

Il n'affichera pas la latitude et la longitude, mais il impose de devoir cliquer sur le bouton Géocoder avant d'envoyer le formulaire.

Et maintenant, le script JavaScript qui va avec:

<script type="text/javascript">
  var geocoder;
  var map;
	var markers = new Array();
	var i = 0;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(47.383, 0.700);
    var myOptions = {
      zoom: 12,
      center: latlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		
  }

  function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
		  		ShowHide('para1'); return false;
				document.getElementById('lat').value = results[0].geometry.location.lat();
				document.getElementById('lng').value = results[0].geometry.location.lng();
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
				markers.push(marker);
				if(markers.length > 1)
					markers[(i-1)].setMap(null);
				i++;
      } else {
        alert("Le geocodage n\'a pu etre effectue pour la raison suivante: " + status);
      }
    });
  }
  function ShowHide(id) {
     var elt = document.getElementById(id); if (!elt) return;
     with(elt.style) {
      display = (display=="none" ) ? "" : "none";
     }
    }
</script>

Je pense qu'avec ce code, tu pourras récupérer ta latitude et ta longitude.

momohuri Messages postés 198 Date d'inscription Statut Membre Dernière intervention 8

Bonjour, Merci pour cette reponse aussi rapide.

alors comme code je passe a :

<script>

 function initialize() {
			   geocoder = new google.maps.Geocoder();
			var latlng = new google.maps.LatLng(47.383, 0.700);
			var myOptions = {
			  zoom: 12,
			  center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
			}
			map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var input = document.getElementById('address');
        var autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.bindTo('bounds', map);

        var infowindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
          map: map
		  
        });
		  
		  google.maps.event.addListener(autocomplete, 'place_changed', function() {
          infowindow.close();
          var place = autocomplete.getPlace();
          if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
          } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);
          }


        });

      }
	  
	    function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
		  		ShowHide('para1'); return false;
				document.getElementById('lat').value = results[0].geometry.location.lat();
				document.getElementById('lng').value = results[0].geometry.location.lng();
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
				markers.push(marker);
				if(markers.length > 1)
					markers[(i-1)].setMap(null);
				i++;
      } else {
        alert("Le geocodage n\'a pu etre effectue pour la raison suivante: " + status);
      }
    });
	
	verification();
  }
  function ShowHide(id) {
     var elt = document.getElementById(id); if (!elt) return;
     with(elt.style) {
      display = (display=="none" ) ? "" : "none";
     }
    }
     </script>

Et pour le form :

j'ai bien ajoute

<input name="address" id="address" type="text" style="width: 250px;" />

<input id="lat" name = "lat" type="hidden" value=""><input name = "lng" id="lng" type="hidden" value="">

<input type="button" value="sauvegarde" onclick="codeAddress()">

J ai bien ma fonctione verrification qui ce lance ensuite et qui me redirige vers la page pour recuperer le tout .

mais sur cette page un :

$lat=$_POST['lat'];
echo $lat;
$lng=$_POST['lng'];
echo $lng;

Ca ne me trouve rien...

PS:La carte ne ce charge pas non plus
pourtant j ai bien le tout dans un <body onload='initialize()'>
et un : <div id="map_canvas"></div>

Merci

Réponse 3 / 5
anatolekadel Messages postés 112 Statut Membre 3
Fait un alert(); en JS pour afficher le contenu des deux hidden (par exemple juste après les avoir donné les valeurs correspondantes.

Pour la carte, as-tu mis dans ton head:
```
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
```
0
Réponse 4 / 5
momohuri Messages postés 198 Date d'inscription Statut Membre Dernière intervention 8

le alert me montre du vide
alert(document.getElementById('lat').value);

Alors que mon champ address s autocomplete bien avec la ville de mon choix.
0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 5
momohuri Messages postés 198 Date d'inscription Statut Membre Dernière intervention 8
c bon le
```
ShowHide('para1'); return false;
```
faisait bugguer le code
merci beaucoup
0

Api google maps javascript

5 réponses

Discussions similaires

Newsletters