11552 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Je suis actuellement en train de développer un site web ou je dois afficher une carte Google Map avec un marker sur une adresse "postale",

J'ai trouvé énormément d'informations sur internet, mais j'ai beau essayer, je n'y arrive pas...

aucun problème pour créer la map, la centrer sur un marker avec les coordonnées :

<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
        
        <!-- Inclusion de l'API Google MAPS -->
		<!-- Le paramètre "sensor" indique si cette application utilise détecteur pour déterminer la position de l'utilisateur -->
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
		function initialiser() {
			var latlng = new google.maps.LatLng(48.872196, 2.321631);

			var options = {
				center: latlng,
				zoom: 15,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			
			var carte = new google.maps.Map(document.getElementById("carte"), options);
		
			//création du marqueur
			var marqueur = new google.maps.Marker({
				position: new google.maps.LatLng(48.872196, 2.321631),
				map: carte
			});
		}
		</script>



Moi, ce que je veux simplement, c'est convertir une adresse en marker... Smiley eek

Quelqu'un peut m'aider?

Zhank's
je suppose que tu parles en JS (sinon il y a une autre solution en PHP) :

ça fait un moment que je n'ai plus bosser sur ça (je me suis dev une class jQuery pour ne plus me poser de question).

Il faut regarder du côté de Geocoder :

// on déclare geocoder made in GG map
var geocoder = new google.maps.Geocoder();

// on utilise la fonction geocode
geocoder.geocode(
// on définit l'adresse
                {'address': 'TON ADRESSE ICI'},
// résultat de l'adresse
                function(results, status) {
// si Google a trouvé l'emplacement de ton adresse
                  if (status == google.maps.GeocoderStatus.OK) {
// on retourne le "position:" nécessaire pour faire le marker
                    console.log(results[0].geometry.location);
                  }
// sinon
                  else {
// erreur et raison de l'erreur (souvent un problème de formatage de l'adresse quand il trouve pas)
                    alert("Erreur pour la raison suivante: " + status);
                  }
                }
);


J'ai simplifié le code pour qu'il marche sans ma class, tu regardes donc dans ta console, tu aura les informations geo.

results[0].geometry.location te retourne l'équivalent de ton "new google.maps.LatLng(48.872196, 2.321631)," mais évidemment pour ton adresse. Il faut donc mettre ce résultat au niveau de "position:"
Merci pour cette réponse, mais malheureusement cela ne fonctionne toujours pas... (je ne suis vraiment pas doué en javascript...

Voici ce que j'ai fais :

<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />

        

        <!-- Inclusion de l'API Google MAPS -->

		<!-- Le paramètre "sensor" indique si cette application utilise détecteur pour déterminer la position de l'utilisateur -->

		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

		<script type="text/javascript">

		function initialiser() {

			// on déclare geocoder made in GG map

var geocoder = new google.maps.Geocoder();

// on utilise la fonction geocode

geocoder.geocode(
// on définit l'adresse
                {'address': '1 boulevard malesherbes 75008'},

// résultat de l'adresse
                function(results, status) {

// si Google a trouvé l'emplacement de ton adresse
                  if (status == google.maps.GeocoderStatus.OK) {

// on retourne le "position:" nécessaire pour faire le marker
                    console.log(results[0].geometry.location);
                  }

// sinon
                  else {
// erreur et raison de l'erreur (souvent un problème de formatage de l'adresse quand il trouve pas)
                    alert("Erreur pour la raison suivante: " + status);
                  }
                }
);

			var options = {
				center: latlng,
				zoom: 15,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};

			var carte = new google.maps.Map(document.getElementById("carte"), options);

			//création du marqueur
			var marqueur = new google.maps.Marker({
				position: new google.maps.LatLng(48.872196, 2.321631),
				map: carte
			});
		}

		</script>



La carte ne s'affiche pas du tout Smiley eek par contre, si j'entre une fausse adresse, j'ai bien l'alerte "Erreur pour la raison suivante: ZERO_RESULTS"...