Discussion :

[kos2000]

Bonjour,

Je souhaite mettre un lien avec une carte googlemap dans la rubrique contact de mon site.
Le but est de situer mon lieu géographique aux utilisateurs.

Me conseilleriez-vous les iframe ou pas?
Si oui, auriez-vous un bon tuto à me conseiller pour apprendre à s'en servir.
Si non, que me conseilleriez-vous?

Merci

[NoSmoking]

Bonjour,

Me conseilleriez-vous les iframe ou pas?

pas besoin d'IFRAME, tu as plusieurs solutions

• intégrer une carte dynamique
• intégrer une image static (peut être suffisant)

Le choix est à faire fonction du besoin.

FAQ API Google Maps

[kos2000]

Merci, je crois que je vais jeter un coup d'oeil à la FAQ.

Désolé de ne pas avoir répondu avant, je n'ai pas pu avoir accès à
internet ces derniers jours.

[kos2000]

Bonjour,

J'ai travaillé sur "le tuto" que tu as écrit:

Comment insérer une carte dans ma page?

Ca marche bien. Merci!

Je voudrais savoir comment on peut faire pour indiquer sur la carte un
lieu qu'on veut montrer à nos utilisateurs, avec le dessin d'une punaise par exemple,
qui reste toujours sur la carte même si l'utilisateur s'y déplace ou fait des zooms avant ou arrière.

[NoSmoking]

Je voudrais savoir comment on peut faire pour indiquer sur la carte un
lieu qu'on veut montrer à nos utilisateurs, avec le dessin d'une punaise par exemple,
qui reste toujours sur la carte même si l'utilisateur s'y déplace ou fait des zooms avant ou arrière.

toujours dans la Comment créer un marker ?

[kos2000]

Merci!
Mais je n'y arrive pas

Ca fait un petit moment que je bosse dessus.

Si je reprends le code de ma carte (qui marche), le voici:

Code javascript :

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

1
2
3
4
5
6
7
8
9
      function initCarte(){
        // création de la carte
        var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
          'center' : new google.maps.LatLng( 46.80, 1.70
          'zoom' : 6
        });
      }
      // init lorsque la page est chargée
      google.maps.event.addDomListener( window, 'load', initCarte);

Je reprends les mêmes valeurs du tuto pour la latitude, la longitude et le zoom,
mais peu importe...
Jusqu'à là ça marche et je comprends bien le code par ailleurs.

Maintenant, avec en plus le code pour créer le maker:

Code javascript :

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
      function initCarte(){
        // création de la carte
        var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
          'center' : new google.maps.LatLng( 46.80, 1.70),
          'zoom' : 6
        });
      }
      // init lorsque la page est chargée
      google.maps.event.addDomListener( window, 'load', initCarte);
 
//CREATION D'UN MARKER  
  // création de l'objet option
  var oMarker = new google.maps.Marker({
    'position' : new google.maps.LatLng( latitude, longitude),// position d'ancrage du marker sur la carte
    'map' : oMap                                              // l'objet carte sur lequel est affiché le marker
  });

Lorsque j'actualise ma page je ne vois pas apparaître de maker.
Je ne sais pas quelle est la cause du problème.

Par contre, je ne comprends pas bien s'il faut reprendre tels quels les mots latitude et longitude,
ou s'il faut remplacer les valeurs à la ligne 'position' : new google.maps.LatLng( latitude, longitude),
car je ne vois pas comme ça comment le navigateur peut faire la relation entre 46.80 et latitude
d'un côté et 1.70 et longitude d'un autre côté. En effet nulle part n'est écrit que
latitude vaut 46.80 et que longitute vaut 1.70.

[NoSmoking]

Attention
le création de ton marker ne doit se faire que lorsque l'initialisation de la carte est effective donc il te faut mettre la réalisation du marker dans la fonction d'initCarte

Code javascript :

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
var longitude = 1.7;
var latitude = 46.8;
function initCarte() {
  // création de la carte
  var oMap = new google.maps.Map(document.getElementById('div_carte'), {
    'center': new google.maps.LatLng(46.80, 1.70),
    'zoom': 6
  });
  //CREATION D'UN MARKER
  // création de l'objet option
  var oMarker = new google.maps.Marker({
    'position': new google.maps.LatLng(latitude, longitude),
    // position d'ancrage du marker sur la carte
    'map': oMap // l'objet carte sur lequel est affiché le marker
  });
 
}
// init lorsque la page est chargée
google.maps.event.addDomListener(window, 'load', initCarte);

Par contre, je ne comprends pas bien s'il faut reprendre tels quels les mots latitude et longitude,...

je les ai rajoutés, dans le code ci dessus, comme variable pour plus de "clarté".

[kos2000]

Merci beaucoup!!

Il faut absolument les deux conditions pour que ça marche:

1) donner une valeur pour latitude et longitude
2) mettre la réalisation du marker dans la fonction d'initCarte

Le tuto est vraiment génial
C'est sympa et super utile!!