Discussion :

[xillibit]

Bonjour,

Voici ce que je veux faire : afficher une dizaine de marqueurs sur une carte et chaque doit avoir un événement 'click' pour
pouvoir ouvrir une info-bulle avec un contenu particulier dans chaque info-bulle.

J'ai pu affiché mes 10 marqueurs sur la carte, mais comme je fais une boucle pour afficher les marqueurs, j'applique un événement 'click' et une info-bulle, mais quand je clique sur un marqueur l'info-bulle s'ouvre toujours au même endroit.

[gdlmus]

Bonjour,

Ceci marche bien en allant chercher le contenu des infobulles dans une base sql. Comme vous n'avez pas spécifié d'où venait le data à mettre dans ces infosbulles, il est difficile de vous aider.
Cela vous donnera quand même une idée. Good luck.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
 <script type="text/javascript">
    //<![CDATA[
 
    infos = [];
 
    function load() {
 
 
      var myOptions = {
      zoom: <?php echo $K['map_zoom'] ?>,
      center: new google.maps.LatLng(mylatlon),
       // center: new google.maps.LatLng(47.6145, -122.3418),
      mapTypeId: google.maps.MapTypeId.HYBRID
    };
 
      var map = new google.maps.Map(document.getElementById("googmap"), myOptions);
      // Change this depending on the name of your PHP sql to xml file
      downloadUrl("sql_to_xml.php", function(data) { // download d'un fichier xml généré à partir d'une base mysql
      var xml = data.responseXML;
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i <  markers.length; i++) {      
 
        var country = markers[i].getAttribute("country");
        var city = markers[i].getAttribute("city");
        var zip = markers[i].getAttribute("zip");
        var county = markers[i].getAttribute("county");
        var state = markers[i].getAttribute("state");
        var latit = markers[i].getAttribute("lat");
        var longi = markers[i].getAttribute("lng");
        var code = markers[i].getAttribute("countcod");
        var time = markers[i].getAttribute("time");
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
 
// les php echo viennent d'une gestion multilingues des titres et textes...
 
        var html ="<div style='font-size: 0.7em;'>"+"<span style='font-size: 14px; font-weight:bold; color:blue;'>"+"<?php echo $K['lg']['guest'] ?>"+"<\/span>" +"<?php echo '<b>'.$K['lg']['from'].'<\/b>' ?>";
        html += "<br />"+"<?php echo '<b>'.$K['lg']['city'].':&nbsp;<\/b>' ?>"+city+"&nbsp;&nbsp;&nbsp;&nbsp;"+"<?php echo '<b>'.$K['lg']['zip'].':&nbsp;<\/b>' ?>"+zip+"<br />"+"<?php echo '<b>'.$K['lg']['st'].':&nbsp;<\/b>' ?>";
        html += state+"&nbsp;&nbsp;&nbsp;&nbsp;"+"<?php echo '<b>'.$K['lg']['county'].':&nbsp;<\/b>' ?>"+county+  "<br /><span style='font-size: 12px;  color:blue;'>"+"<?php echo '<b>'.$K['lg']['country'].':&nbsp;<\/b>' ?>"+country+"<\/span><\/div>";
 
         var icon = customIcons['code'] || {};  // va chercher des icônes dans un dossier... oublier les apostrohes autour de   code...
            var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow,
            content:html,    // c'est ici que se focalise votre problème
            animation: google.maps.Animation.DROP
          });
          // BEGIN close info windows by a click anywhere on the map
           google.maps.event.addListener(map, 'click', function() {
           closeInfos();
          });
          // END close info windows by a click anywhere on the map
           google.maps.event.addListener(marker, 'click', function() {
           closeInfos();
           var info = new google.maps.InfoWindow({content: this.content});
           info.open(map,this);
           infos[0]=info;
          });
 
 
        });
}
 
function closeInfos(){
   if(infos.length > 0){
      infos[0].set("marker",null);
      infos[0].close();
      infos.length = 0;
   }
}
 
function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;
 
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };
      request.open('GET', url, true);
      request.send(null);
}
 
function doNothing() {}
//]]>
</script>

Hope it helps...!

[tina24]

bonjour,
a ce que tu veux afficher chaque marqueur avec son infobulle sur ta carte
et de quel version tu es travaille : V3 ou V2 ?
j'attende ta réponse pour ta idée

[xillibit]

J'utilise la V3 de l'API

Chaque marqueur doit avoir sa propre infobulle, les données qui seront dans l'infobulle sont mises en dur

[tina24]

bonjour,
je propose le code en dessous, il y afficher chaque marqueur avec son info-bulle mais le description de chaque info-bulle ça donne par (Données cartographiques ©2011 Google), mais si tu peux utiliser sur ta choix je pense que tu es obliger de crée une base de donnée et d'un serveur script (dans ce cas si tu veux, dit a moi pour je donne tous les information supplémentaire)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
//Afficher marqueure 
function createMarker(lat, lng, titre, description){
var latlng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: titre
});
var infobulle = new google.maps.InfoWindow({
content: description
});
google.maps.event.addListener(marker, 'click', function(){
infobulle.open(map, marker);
});
}// fin fonction afficher marqueure avec son infobulle

toujours pour votre soutien
cordialement Tina24