text personnalisé

Je fais un site Web sur les cyclistes tués en Norvège. Pour mon projet, j'ai utilisé google maps api v3, mais j'ai une vague familiarité avec javascript. Vous pouvez voir mes résultats jusqu'à présent ici: http://salamatstudios.com/googlemapstest/

D'une manière générale, je souhaite avoir plusieurs marqueurs avec infowindows sur chacun d'eux. Chacune des infowindows contiendra: Nom (âge), Lieu, Date de décès, Lire plus (qui sera lié à une page sur le site lui-même).

J'aime cet exemple ici: http://salamatstudios.com/bicycles/

J'ai essayé de travailler avec un seul marqueur et infowindow et cela a bien fonctionné. Lorsque je souhaite ajouter de nouveaux marqueurs avec des fenêtres d'informations personnalisées sur chaque, je me suis coincé. En ce moment, j'ai 3 marqueurs sur différents emplacements comme indiqué dans le premier lien, mais aucune des fenêtres d'informations ne s'affiche lorsque je clique sur le marqueur.

Comment puis-je l'entourage pour le coder afin que les infowindows apparaissent? Et comment puis-je avoir du texte personnalisé dans chaque infowindow? Je vais avoir environ 30 à 40 marqueurs sur la carte quand c'est terminé. Toutes les fenêtres d'informations auront différents types d'informations.

function initialize() { var mapOptions = { center: new google.maps.LatLng(65.18303, 20.47852), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP, // MAP CONTROLS (START) mapTypeControl: true, panControl: true, panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.LEFT_TOP }, streetViewControl: true, streetViewControlOptions: { position: google.maps.ControlPosition.LEFT_TOP }, // MAP CONTROLS (END) }; var map = new google.maps.Map(document.getElementById("map"), mapOptions); // -------------- MARKER 1 var marker1 = new google.maps.Marker({ position: new google.maps.LatLng(59.96384, 11.04120), map: map, icon: 'img/bike5.png' }); // MARKER 1'S INFO WINDOW var infowindow1 = new google.maps.InfoWindow({ content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>' }); // End of infowindow code // Adding a click event to the marker google.maps.event.addListener(marker1, 'click', function() { // Calling the open method of the infoWindow infowindow1.open(map, marker); }); // -------- END OF 1st MARKER // -------------- MARKER 2 var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(60.63040, 8.56102), map: map, icon: 'img/bike5.png' }); // MARKER 2'S INFO WINDOW var infowindow2 = new google.maps.InfoWindow({ content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>' }); // End of infowindow code // Adding a click event to the marker google.maps.event.addListener(marker2, 'click', function() { // Calling the open method of the infoWindow infowindow2.open(map, marker); }); // -------- END OF 2nd MARKER // -------------- MARKER 3 var marker3 = new google.maps.Marker({ position: new google.maps.LatLng(60.39126, 5.32205), map: map, icon: 'img/bike5.png' }); // MARKER 3'S INFO WINDOW var infowindow3 = new google.maps.InfoWindow({ content: 'Name<br />Location<br />Date<br /><br /><a href="http://www.db.no" target="_blank">Read more(test link)</a>' }); // End of infowindow code // Adding a click event to the marker google.maps.event.addListener(marker3, 'click', function() { // Calling the open method of the infoWindow infowindow3.open(map, marker); }); // -------- END OF 3rd MARKER } google.maps.event.addDomListener(window, 'load', initialize);

Serais génial si certains pouvaient m'indiquer. J'ai essayé de chercher un peu, mais je ne trouve pas vraiment ma réponse. Merci d'avance! 🙂

Vous devez attacher l'infowindow aux marqueurs corrects. Actuellement, ils sont tous associés à un «marqueur», qui n'existe pas (et devrait provoquer un message d'erreur dans la console javascript lorsque vous cliquez sur les marqueurs).

À l'intérieur du changement d'écoute des clics:

 infowindow1.open(map, marker); infowindow2.open(map, marker); infowindow3.open(map, marker);

À:

 infowindow1.open(map, marker1); infowindow2.open(map, marker2); infowindow3.open(map, marker3);

Exemple de travail

  google.maps.event.addListener(marker1, 'click', function() { // Calling the open method of the infoWindow infowindow1.open(map, marker); });

Passer à

  google.maps.event.addListener(marker1, 'click', function() { // Calling the open method of the infoWindow infowindow1.open(map, this); });

En plus de HoangHieu Réponse lorsque vous utilisez pour la boucle, il est préférable de l'utiliser de cette façon:

 marker.info = new google.maps.InfoWindow({ content: 'some text' }); google.maps.event.addListener(marker, 'click', function() { this.info.open(map, this); });