API Maps Google

poncherello66 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   -  
poncherello66 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je bricole avec les API de Google pour créer des marqueurs et groupes de marqueurs sur la carte du sud-ouest. Problème n°1 : les titres des marqueurs ne s'affichent pas
Problème n°2 : je n'arrive pas à créer une infobulle personnalisée par marqueur

Voici mon code : 

<title>Cartes Sud-Ouest France</title>
    <style>
      #map-sudouest {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
</head>
<body>

<div id="map-sudouest"></div>
<script>
function initMap() {

        var map = new google.maps.Map(document.getElementById('map-sudouest'), {
          zoom: 9,
          center: {lat: 44.7002222, lng: -0.2995785}
        });

        var labels = 'B';
        
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length] 
          });
        });

        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
       }
      
       var locations = [
         {lat: 44.8333, lng: -0.5667},
         {lat: 44.8, lng: -0.5333},
         {lat: 44.889, lng: 1.2166, title:'Mon texte'} // le titre n'apparaît pas
       ];
      
      /* les infos bulles ne percutent pas
       var infowindow = new google.maps.InfoWindow({
      content: 'Du texte ici'
    });

    var marker = new google.maps.Marker({
      position: {lat: 44.889, lng: 1.2166, title:'Mon texte'},
      map: map,
       title: 'Sarlat-la-Canéda'
    });
    
    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
  }*/
</script>

 <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

Quelqu'un a-t-il une idée ?
Merci d'avance

A voir également:

2 réponses

Réponse 1 / 2
Utilisateur anonyme
 
Bonjour

En ce qui concerne le titre, je vois que tu l'as mis comme une des composantes de la position. Or, ce n'est pas une composante de la position. C'est une composante de l'objet passé au constructeur de Marker. Ton appel au constructeur devrait ressembler à : 
return new google.maps.Marker({
  position: location,
  label: labels[i % labels.length] ,
  title: "débrouille-toi pour mettre le titre ici"
});
2
poncherello66 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention  
 
Cool, ça marche, merci bien, mais je voudrais un title différent par marqueur, et reste mon deuxième pbm -)
0
Réponse 2 / 2
Utilisateur anonyme
 
Tu voudrais un titre différent par marqueur, je l'ai bien compris, c'est pourquoi j'avais mis "débrouille-toi...". Ce n'est pas difficile à cet endroit de récupérer ce que tu avais mis dans position.title, non ?
Quant à ton deuxième problème, quel est-il exactement : tu ne vois pas du tout le 'B', ou tu voudrais que lui aussi soit personnalisé par marqueur ?
0
poncherello66 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention  
 
Si je vois le B, je voudrais juste qu'il y ait une infobulle différente par marqueur au clic de la souris
0
Utilisateur anonyme
 
Alors il te suffit de mettre les labels personnalisés dans ton tableau 'locations' comme tu le fais déjà pour les titres. Supposons que tu les appelles 'label'.
Ensuite, dans l'appel au constructeur Marker, tu n'as qu'à récupérer le titre et le label qui seront disponibles dans location.title et location.label.
0
Utilisateur anonyme
 
Pardon, je reviens sur ma réponse. L'infobulle est donnée par la propriété title. Donc tu parles deux fois de la même chose en parlant du titre et de l'infobulle. À moins que ce que tu appelles "titre" ne soit en fait le label ? De quoi parles-tu exactement dans chacun de tes problèmes ?
0
poncherello66 Messages postés 7 Date d'inscription   Statut Membre Dernière intervention  
 
Oui pardon, le title c le message qui apparaît quand tu laisses ton curseur sur le marker, exactement comme une image avec la propriété alt. L'infobulle, ou infowindow, c un message plus détaillé qui apparaît comme un pop up au clic de la souris sur le marker ! J'espère que c plus clair
0
Utilisateur anonyme
 
Il y a un problème de vocabulaire. Le 'title' c'est l'infobulle : le message apparaît dès que la souris passe sur la marqueur, sans qu'on clique. C'est écrit dans la doc Google map API et c'est aussi la définition que donne Wikipedia :
https://fr.wikipedia.org/wiki/Infobulle
L'infoWindow, ce n'est pas la même chose. Tu peux l'afficher en ajoutant une fonction événementielle ("onclick') au marqueur, mais à ma connaissance ce n'est pas directement un paramètre qu'on passe à la création du marqueur.
0