Sujet Précédent Sujet Suivant

API Maps Google

Fermé
poncherello66 Messages postés 7 Date d'inscription dimanche 10 juin 2018 Statut Membre Dernière intervention 10 juin 2018 - Modifié le 10 juin 2018 à 11:31
poncherello66 Messages postés 7 Date d'inscription dimanche 10 juin 2018 Statut Membre Dernière intervention 10 juin 2018 - 10 juin 2018 à 20:56
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
10 juin 2018 à 14:33
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 dimanche 10 juin 2018 Statut Membre Dernière intervention 10 juin 2018
10 juin 2018 à 14:57
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
10 juin 2018 à 15:20
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 dimanche 10 juin 2018 Statut Membre Dernière intervention 10 juin 2018
10 juin 2018 à 16:29
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
Modifié le 10 juin 2018 à 17:25
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
Modifié le 10 juin 2018 à 17:37
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 dimanche 10 juin 2018 Statut Membre Dernière intervention 10 juin 2018
10 juin 2018 à 18:40
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
10 juin 2018 à 19:27
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