Ajouter un marqueur lors d'un clic de souris sur la carte

**Quentin75** · 03/03/2015, 11h52

Bonjour ! J'arrive à afficher une carte Google Maps sur ma page web. Grâce au service de géolocalisation, je place par défaut un marqueur sur la position actuelle. Ce que j'aimerais maintenant faire, c'est pouvoir ajouter un autre marqueur en cliquant avec la souris sur la carte. Je sais comment ajouter un marqueur avec une position définie mais pas en cliquant sur la carte. J'ai bien lu la FAQ mais la réponse n'y ait pas... du moins je crois :p

Pourriez-vous m'aider svp ? Auriez-vous une idée de comment faire ? Merci beaucoup !!!!!

Voici mon code :

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
49
50
51
<!DOCTYPE html>
<html>
 
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    <title>Entrega 5 - BBDD</title>
    <style>
      #map {
        height : 600px; /* IMPERATIF */
        width : 600px;
        margin : 20px;
        border : 1px solid #888;
      }
    </style>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script>
 
      function initCarte(){
        // création de la carte
        var map = new google.maps.Map( document.getElementById('map'),{
          'center' : new google.maps.LatLng( 46.80, 1.70),
          'zoom' : 16
        });
        if (navigator.geolocation)
          var watchId = navigator.geolocation.watchPosition(localizacion,null,{enableHighAccuracy:true});
        else
          alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
 
      function localizacion(position){
        map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
        var marker = new google.maps.Marker({
        position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
        map: map
        }); 
      }
      }
      google.maps.event.addDomListener( window, 'load', initCarte);
    </script>
  </head>
 
  <body>
 
    <h1>Geolocalisation et Cartes/h1>
    <div id="map"></div>
 
  </body>
 
 
</html>

**Spartacusply** · 03/03/2015, 14h43

C'est ton jour de chance :

Code :

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

1
2
3
4
5
6
google.maps.event.addListener(taMap, 'click', function (event) {
    new google.maps.Marker({
	map: taMap,
	position: event.latLng
    });
});

**Quentin75** · 03/03/2015, 15h36

Ca ne marche pas

Voici mon code complet :

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
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
 
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    <title>Entrega 5 - BBDD</title>
    <style>
      #map {
        height : 600px; /* IMPERATIF */
        width : 600px;
        margin : 20px;
        border : 1px solid #888;
      }
    </style>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script>
 
      function initCarte(){
        // création de la carte
        var map = new google.maps.Map( document.getElementById('map'),{
          'center' : new google.maps.LatLng( 46.80, 1.70),
          'zoom' : 16
        });
        if (navigator.geolocation)
          var watchId = navigator.geolocation.watchPosition(localizacion,null,{enableHighAccuracy:true});
        else
          alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
 
      function localizacion(position){
        map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
        var marker = new google.maps.Marker({
        position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
        map: map
        }); 
      }
      }
      google.maps.event.addDomListener( window, 'load', initCarte);
      google.maps.event.addListener(map, 'click', function (event) {
         new google.maps.Marker({
	 map: map,
	 position: event.latLng
         });
      });
    </script>
  </head>
 
  <body>
 
    <h1>Geolocalisation et Cartes/h1>
    <div id="map"></div>
 
  </body>
 
 
</html>

**Spartacusply** · 03/03/2015, 15h49

Bon exactement moi c'était pas comme ça, je suis pas sur que event.latLng soit un objet de type latLng.

A voir ce que donne ceci :

Code :

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

1
2
3
4
5
6
google.maps.event.addListener(taMap, 'click', function (event) {
    new google.maps.Marker({
	map: taMap,
	position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
    });
});

**Quentin75** · 03/03/2015, 15h51

Ca ne marche toujours pas

**Spartacusply** · 03/03/2015, 15h56

Ah oui non mais en fait c'est logique, si tu regardes ta console tu vois que ta map est inconnue quand le listener est créé. Ce qui est parfaitement normal puisqu'il n'est pas à la fin de la fonction initCarte. Donc ta carte n'existe pas encore.

**NoSmoking** · 03/03/2015, 19h39

Bonjour,
@Quentin75 : qu'en est-il de ta précédente discussion Création d'un Google Maps ?
Si elle est résolue merci d'appliquer les règles en vigueur sur le forum

http://club.developpez.com/regles/#LIV-M.

J'ai bien lu la FAQ mais la réponse n'y ait pas... du moins je crois :p

En explorant les exemples tu aurais pu tomber sur http://javascript.developpez.com/faq...nger_titre.php.

Pour info la FAQ ne reprend que les questions les plus fréquemment posées et ne reprend pas la totalité de l'API fort riche en exemples, mais elle est évolutive

- La documentation officielle de l'API.

Maintenant je n'ai plus qu'à trouver comment tracer un itinéraire entre deux marqueurs que je viens de créer en cliquant :p

Merci également de ne poser qu'une question dans le même fil.
Les multiples questions nuisent grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue.

@Spartacusply :

je suis pas sur que event.latLng soit un objet de type latLng.

event.latLng est bien un objet LatLng

Ajouter un marqueur lors d'un clic de souris sur la carte

APIs Google

Vue hybride

Discussions similaires

Partager

Partager