Googlmap Marker et infowindows

Mammouth du PHP | 592 Messages

26 janv. 2017, 16:17

Bonjour,
j’essaie de mettre en place un carte google avec des markers et des infoswindows pour chaque marker.
le soucis que je rencontre c'est au niveau des infowindows qui n'affiche pas les bonnes infos car elles affichent toutes le même texte (info5).
Je suis en mode "test" car c'est un peu nouveau pour moi ais si je pouvai avoir un coup de main pour que les bonne infos s'affichent :)

voici le code sur lequel je test.

Code : Tout sélectionner

function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: {lat: -33.9, lng: 151.2} }); setMarkers(map); } // Data for the markers consisting of a name, a LatLng and a zIndex for the // order in which these markers should display on top of each other. var beaches = [ ['Bondi Beach', -33.890542, 151.274856, 'infos1', 4], ['Coogee Beach', -33.923036, 151.259052, 'infos2', 5], ['Cronulla Beach', -34.028249, 151.157507, 'infos3', 3], ['Manly Beach', -33.80010128657071, 151.28747820854187, 'infos4', 2], ['Maroubra Beach', -33.950198, 151.259302, 'infos5', 1] ]; function setMarkers(map) { // Adds markers to the map. // Marker sizes are expressed as a Size of X,Y where the origin of the image // (0,0) is located in the top left of the image. // Origins, anchor positions and coordinates of the marker increase in the X // direction to the right and in the Y direction down. var image = { url: 'flag.png', // This marker is 20 pixels wide by 32 pixels high. size: new google.maps.Size(20, 32), // The origin for this image is (0, 0). origin: new google.maps.Point(0, 0), // The anchor for this image is the base of the flagpole at (0, 32). anchor: new google.maps.Point(0, 32) }; // Shapes define the clickable region of the icon. The type defines an HTML // <area> element 'poly' which traces out a polygon as a series of X,Y points. // The final coordinate closes the poly by connecting to the first coordinate. var shape = { coords: [1, 1, 1, 20, 18, 20, 18, 1], type: 'poly' }; for (var i = 0; i < beaches.length; i++) { var beach = beaches[i]; var marker = new google.maps.Marker({ position: {lat: beach[1], lng: beach[2]}, map: map, icon: image, shape: shape, title: beach[0], zIndex: beach[4], }); var infowindow = new google.maps.InfoWindow({ content: beach[3], maxWidth: 200 }); google.maps.event.addListener(marker, "click", function() { infowindow.setContent(this.map); infowindow.open(map, this); }); } }
Merci de votre aide

ynx
Eléphant du PHP | 275 Messages

03 févr. 2017, 17:40

Salut,

Une solution possible est d'ajouter un attribut id à tes objets Marker afin de renseigner l'index du tableau beach correspondant à ce marqueur :
var marker = new google.maps.Marker({
        position: {lat: beach[1], lng: beach[2]},
        map: map,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[4],
        id: i
    });
Puis lors du clique sur un marqueur, on modifie le contenu de l'infowindow en fonction de l'id du marqueur :
google.maps.event.addListener(marker, "click", function () {
        infowindow.setContent(beaches[marker.id][3]);
        infowindow.open(map, this);
    });
Bonne journée,