Bonjour, Je sollicite de l'aide pour un problème lié à l'API Google Map. J'ai fais une boucle sur le placement des markers et d'infobulle mais évidemment, c'est la dernière infobulle définit qui s'ouvre sur chaque marker. Apres quelques recherches j'ai compris qu'il fallait sortir la variable infowindow de la boucle pour ne pas qu'elle soit écrasée. Mais la question c'est comment attribuer la construction de l'infobulle à chaque marker ? Voici le code : Javascript : [code] <script type="text/javascript">
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: 5,
minZoom : 5,
maxZoom : 10,
center: new google.maps.LatLng(46.2276380, 2.2137490),
disableDefaultUI: true,
overviewMapControl : false,
zoomControl : true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

setMarkers(map, centres_plages);

}

function codeAddress() {
var address = document.getElementById('adresse_google_map').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}

/
[0] Nom du domaine
[1] Latitude
[2] Longitude
[3] Rue
[4] Code poste, Ville
[5] Téléphone
[6] Fax
[7] Email
[8] URL
/
var centres_plages = [
['Domaine 1', 48.85887766623372, 2.3470598999999766, "Rue1", "75 Paris", "Tél. : 0102030405", "Fax. : 0102030405", "contact@toto.com", "https://www.google.fr/"],
['Domaine 2', 44.863752324699426, -0.5861409999999978, "Rue2", "33200 Bordeaux", "Tél. : 0102030405", "Fax. : 0102030405", "contact@toto.com", "https://www.google.fr/"],
['Domaine 3', 45.75797832429399, 4.835120949999919, "Rue3", "69060 Lyon", "Tél. : 0102030405", "Fax. : 0102030405", "contact@toto.com", "https://www.google.fr/"]
];

function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var centre_plage = locations*;

    var myLatLng = new google.maps.LatLng(centre_plage[1], centre_plage[2]);

    var marker = new google.maps.Marker({
        position: myLatLng,
        map : map,
        title : centre_plage[0],
        zIndex : i + 1
    });

    var contentString = '<div id="contentMap">'+
        '<h1 class="titleMap">'+centre_plage[0]+'</h1>'+
        '<div id="bodyContent">'+
            '<p>'+centre_plage[3]+'<br>' +
            ''+centre_plage[4]+'<br>'+
            ''+centre_plage[5]+'<br>'+
            ''+centre_plage[6]+'<br>'+
            ''+centre_plage[7]+'</br>'+
            '<a href="'+centre_plage[8]+'" target="_blank">En savoir plus</a></p>'+
        '</div>'+
    '</div>';

    var infowindow = new google.maps.InfoWindow({
        content : contentString,
        maxWidth : 600
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,this);
    });
}

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>[/code] HTML : [code]

<form>
<label for="adresse_google_map">Ville</label><br>
<input id="adresse_google_map" type="textbox"><br>
<input type="button" value="Rechercher" onclick="codeAddress()">
</form>

[/code] Merci par avance ! :)

3 réponses


meneldil
Auteur
Réponse acceptée

J'ai résolu le problème en utilisant la technique des closures en Javascript ! :D

meneldil
Auteur

Up ! :)

Tes infos bulles sont visibles en permanence ou seulement au survol/click sur un marker ? Car dans le deuxième cas, tu peux ne créer qu'une info bulle et remplir le contenu dynamiquement. Ca sera plus simple je pense.