Discussion :

[reivilo26]

Bonjour,

J'ai récupérer un code que j'ai pu retravailler pour qu'il me convienne sauf au niveau des icones marqueurs. Je voudrais pouvoir déclarer des icones spécifique pour les marqueurs dans mon fichier data mais je n'arrive pas a les déclarer correctement dans ma carte.
exemple data:

Code :

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

1
2
3
var locations = [
      {lat:-21.18111,lng:55.291507,data:{info:'<div dir="ltr"><a href="http://www.blabla.com/pCardinal.php">Le Cardinal des Grands Bleus</a></br> vous offre 10 bungalows</div><div dir="ltr"><br><center><img src="http://www.blabla.com/images/cardinal/cardinalvue.png" style="font-size:10pt;width:242px"></center></div>',options:{icon: "http://www.blabla.com/images/icones/hebergement.png"}},
      {lat:-21.182391,lng:55.290263,data:{info:'<div dir="ltr">"<a href="http://www.blabla.com/pPecheurs.php">R&eacute;sidence des P&ecirc;cheurs</a>" six bungalows en bois.</div><center><div dir="ltr"><img src="http://www.blabla.com/images/les%20pecheurs/ext1.png"></div></center>',options:{icon: "http://www.blabla.com/images/icones/hebergement.png"}},

Et ma carte:

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
$(function(){
                $('#maCarte').gmap3(
                    {
                        action: 'init',
                        options:{
                            center:[-21.11653,55.509796],
                            zoom: 10,
                            mapTypeId: google.maps.MapTypeId.HYBRID
                        }
                    },
                    {
                        action: 'addMarkers',
                        radius:50,
                        markers: locations,
                        clusters:{
                            // Ce style sera utilisé pour les clusters comportant plus de 0 marqueur
                            0: {
                                content: '<div class="cluster cluster-1">CLUSTER_COUNT</div>',
                                width: 53,
                                height: 52
                            },
                            // Ce style sera utilisé pour les clusters comportant plus de 20 marqueur
                            20: {
                                content: '<div class="cluster cluster-2">CLUSTER_COUNT</div>',
                                width: 56,
                                height: 55
                            },
                            // Ce style sera utilisé pour les clusters comportant plus de 50 marqueur
                            50: {
                                content: '<div class="cluster cluster-3">CLUSTER_COUNT</div>',
                                width: 66,
                                height: 65
                            }
                        },
                        marker: {
                            options: {
                                icon: new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/icon_green.png')
                            },
                            events:{  
                                mouseover: function(marker, event, data){
                                    $(this).gmap3(
                                        {
                                            action:'clear', name:'overlay'
                                        },
                                        {
                                            action:'addOverlay',
                                            latLng: marker.getPosition(),
                                            content:'<div class="infobulle">' +
 
                                                    '<div class="text">'+ data.info +'</div>' +
                                                    '</div>' +
                                                    '<div class="arrow"></div>',
                                            offset: {
                                                x:-46,
                                                y:-270
                                            }
										}
									);
								},

Je sais que c'est au niveau de

Code :

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

1
2
3
4
marker: {
                            options: {
                                icon: new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/icon_green.png')
                            },

qu'il faut que je change quelque chose mais après de multiples essais... rien
Si quelqu'un voit...
Merci

[NoSmoking]

Bonjour et bienvenus sur DVP.

Je ne connais pas gmap3, mais je mettrais simplement

Code :

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

1
2
3
4
marker:{
  options:{                              
    icon:'http://maps.google.com/mapfiles/marker_green.png'
  },

[reivilo26]

Merci pour l'accueil !
J'ai du mal m'exprimer. Ce que je voudrais c'est qu'il prenne en compte l'icone spécifié dans les options de chaque marqueur, déclaré dans mon fichier data.
Je voudrais 4 ou 5 sortes d'icones différentes.
Ce serais quelque chose comme

Code :

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

1
2
3
4
marker:{
  options:{                              
    icon:'option.icone'
  },

Je n'arrive pas à savoir si c'est ma déclaration dans mes data qui est foireuse ou bien le code d'affichage du marker...
En tout cas merci pour la réponse, je continue à chercher.

[NoSmoking]

certes, dans ce cas j'opterais pour quelque chose comme

Code :

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

1
2
3
4
  var i, oMarkers = $('#maCarte').gmap3({action:'get', name:'marker', all:true});
  for( i in oMarkers) {
    oMarkers[i].setOptions({'icon' : locations[i].data.options.icon});
  }

a mettre après

Code :

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

1
2
3
$('#maCarte').gmap3(
//
);

pas sur que cela soit très propre.

[reivilo26]

Merci mais ça ne fonctionne pas.
J'ai fini par trouver une solution alternative en déclarant mes "markers" au sein même de ma page. C'est pas le top mais ça a le mérite de fonctionner.
Si je trouve mieux je le mettrais dans le post. (au cas où ça serve à quelqu'un)
En tout cas, merci pour les interventions.