Ajouter marqueur en fonction d'une adresse

**shelko** · 12/05/2011, 14h21

Bonjour,
je suis en train de découvrir google map et j'ai un soucis qui doit être courant mais je ne trouve rien de récent sur le sujet.
En fait j'ai une adresse avec code postal, nom de ville et pays et je voudrais placer un marqueur dynamiquement sur une map centrée sur cette adresse.

J'ai trouvé pas mal d'exemples récent avec les lat et long mais comment faire la bascule entre mon adresse et les lat et long, ou alors y a t il une fonction qui prend directement l'adresse en attribut.

**NoSmoking** · 12/05/2011, 17h59

Bonjour,
il te faut créer un objet Geocoder et passer à sa méthode geocode un objet avec la clé address :.

Dans l'autre sens on passe à cette même méthode un objet avec une clé latLng :.

Une fois les datas reçues il te faut exploiter sa propriété geometry.location qui contient la position.

Pour la création du marqueur et le centrage c'est un jeu d'enfant pour toi...

cela peut donner

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function codeAddress() {
  // recup adresse
  var address = document.getElementById("saisie").value;
  // creation objet Geocoder
  var geocoder = new google.maps.Geocoder();
  // appel methode geocode
  geocoder.geocode( { 'address': address}, function( data, status) {
    // reponse OK
    if( status == google.maps.GeocoderStatus.OK){
      // recup. position
      var pos = data[0].geometry.location;
      // creation d'un marker
      var marker = new google.maps.Marker({
        map : oMap,
        position : pos
      });
      // centrage de la carte
      oMap.setCenter( pos);
    }
    else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

**shelko** · 12/05/2011, 21h53

Visiblement il y a un soucis car rien ne s'affiche.
J'ai bidouillé un peu ton code pour l'adapter à l'exemple de la doc GG et j'ai mis un exemple de location concret car la loc va sortir d'une BDD via php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
 
	var address = 'Gorcy France';
  // creation objet Geocoder
  var geocoder = new google.maps.Geocoder();
  // appel methode geocode
  geocoder.geocode( { 'address': address}, function( data, status) {
    // reponse OK
    if( status == google.maps.GeocoderStatus.OK){
      // recup. position
      var pos = data[0].geometry.location;
      // creation d'un marker
      var marker = new google.maps.Marker({
        map : oMap,
        position : pos
      });
      // centrage de la carte
      oMap.setCenter( pos);
    }
    else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
  }
 
</script>
</head>
<body onload="initialize()">
  <div id="oMap" style="width:100%; height:100%"></div>
</body>
</html>

Si quelqu'un voit un truc qui cloche je suis preneur (car le javascript c'est pas mon fort)

**NoSmoking** · 12/05/2011, 22h26

Si quelqu'un voit un truc qui cloche je suis preneur (car le javascript c'est pas mon fort)

qui cloche non, mais qui manque OUI, il te faut peut être penser à créer la MAP.

**shelko** · 12/05/2011, 23h34

Voici avec la création de map mais toujours rien, ai-je fais une erreur ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
 
	var address = 'Gorcy France';
  // creation objet Geocoder
  var geocoder = new google.maps.Geocoder();
  // appel methode geocode
  geocoder.geocode( { 'address': address}, function( data, status) {
    // reponse OK
    if( status == google.maps.GeocoderStatus.OK){
      // recup. position
      var pos = data[0].geometry.location;
      // creation d'un marker
      var marker = new google.maps.Marker({
        map : my_map,
        position : pos
      });
      // centrage de la carte
      oMap.setCenter( pos);
	  var myOptions =
          {
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
          };
	  var map = new google.maps.Map(document.getElementById("my_map"), myOptions);
    }
    else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
  }
 
</script>
</head>
<body onload="initialize()">
  <div id="my_map" style="width:100%; height:100%"></div>
</body>
</html>

**NoSmoking** · 13/05/2011, 07h43

je ne vois toujours pas de création de Map
cela ressemble à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
  var myOptions = {
    zoom : 8,
    center : new google.maps.LatLng(45.0, 3.0),
    mapTypeId : google.maps.MapTypeId.ROADMAP
  }
  var oMap = new google.maps.Map(document.getElementById("my_map"), myOptions);

à mettre dans ta fonction initialize...

**shelko** · 13/05/2011, 23h49

J'avais mis un bout de coder semblable (sauf centrage qui doit aussi être mis automatiquement via l'adresse) dans le code du post d'avant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    
	var address = 'Gorcy France';
  // creation objet Geocoder
  var geocoder = new google.maps.Geocoder();
  // appel methode geocode
  geocoder.geocode( { 'address': address}, function( data, status) {
    // reponse OK
    if( status == google.maps.GeocoderStatus.OK){
      // recup. position
      var pos = data[0].geometry.location;
      // creation d'un marker
      var marker = new google.maps.Marker({
        map : oMap,
        position : pos
      });
      // centrage de la carte
      oMap.setCenter( pos);
	  var myOptions =
          {
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
          };
	  var map = new google.maps.Map(document.getElementById("my_map"), myOptions);
    }
    else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
  }
 
</script>
</head>
<body onload="initialize()">
  <div id="my_map" style="width:100%; height:100%"></div>
</body>
</html>

mais je n'ai aucune erreur dans la console javascript de l'inspecteur chrome, mais je n'ai aucun résultat.

**NoSmoking** · 13/05/2011, 23h56

Il te faut céer l'objet MAP avant de l'utiliser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function initialize() {
  var address = 'Gorcy France';
  //--------------------------------------//
  // creation de la MAP avant utilisation //
  //--------------------------------------//
  var myOptions = {
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var oMap = new google.maps.Map(document.getElementById("my_map"), myOptions);
 
  // creation objet Geocoder
  var geocoder = new google.maps.Geocoder();
  // appel methode geocode
  geocoder.geocode( { 'address': address}, function( data, status) {
    // reponse OK
    if( status == google.maps.GeocoderStatus.OK){
      // recup. position
      var pos = data[0].geometry.location;
      // creation d'un marker
      var marker = new google.maps.Marker({
        map : oMap,
        position : pos
      });
      // centrage de la carte
      oMap.setCenter( pos);
    }
    else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

mais je n'ai aucune erreur dans la console javascript de l'inspecteur chrome, mais je n'ai aucun résultat.

cela me surprend!

**shelko** · 14/05/2011, 00h22

Merci Nosmoking ça fonctionne nickel

Ajouter marqueur en fonction d'une adresse [Google Maps]

APIs Google

Discussions similaires

Partager

Partager