Discussion :

[Elztx]

Bonjour à tous et à toutes,
Je ne maîtrise pas encore très bien Javascript,
J'ai à ce jour un souci avec le groupement de marqueurs via google.. J'ai beau regarder la documentation je ne comprends pas très bien ce qui coince dans mon code.. (ayant de grosses lacunes en anglais ça n'aide pas, autant dans la doc que sur les forums étrangers..)

Je veux appliquer le markerclustering sur ma map et je n'y parviens pas.

Voilà mon fichier markers.js (fonctionne très bien jusqu'à la ligne 16 donc) :


Voilà mon fichier map.js :


Et mon fichier main :



Si quelqu'un peut jeter un oeil ce serait top !
Merci beaucoup !!

[NoSmoking]

Bonjour et bienvenue sur DVP.

Il est préférable de mettre directement le code dans la discussion en l'encadrant par des balises bbcode [CODE][/CODE].

A voir Aide sur l'utilisation des boutons.

Concernant ton soucis je commencerais par mettre une virgule en fin de ligne 12.

[Elztx]

Merci, je vais lire un peu le fonctionnement du forum, j'étais trop pressée de trouver une solution à mon souci aha ^^

J'ai ajouté la virgule, merci pour ce point j'avais pas fait attention.
Mais mon souci est toujours présent..

Je remets mon code avec les balises!

Map.js :

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
var createMap = {
    url: "https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=monapi",
    map: null,
    initMap: function () { // Creation Map
        "use strict";
        this.map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 45.750000, lng: 4.850000},
            zoom: 15
        });
    },
 
    setMarker: function () { // Creation marqeurs
        "use strict";
        var manager = Object.create(MarkerManager);  // Creation objet avec MarkerManager prototype
 
        ajaxGet(this.url, function (reply) {
            var locations = JSON.parse(reply);       // Creation array avec la réponse de l'API
 
            locations.forEach(function (location) {   // For each "location" de l'array "locations"
                MarkerManager.init(location);              // Creation d'un nouveau marqueur
                //manager.showDetails(location);       // Montrer les détails du marqueur au clic
            });
            manager.pushMarker();                    // Creation du MarkerClusterer
        });
    }
};

Markers.js :

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
var MarkerManager = {
    markers: [],
    init: function (location) {                             // Créé un nouveau marqueur
        "use strict";
        marker = new google.maps.Marker({
            map: createMap.map,
            position: location.position,
            title: location.name,
            icon: "images/biker_green.png"
        });
        MarkerManager.markers.push(MarkerManager.marker);    // Ajoute le marqueur à l'array "markers"
    },
 
 
 
pushMarker: function () { // Créé le MarkerClusterer
    "use strict";
        var markerCluster = new MarkerClusterer(createMap.map, MarkerManager.markers,
                {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
    }
};

[NoSmoking]

Il nous manque des infos pour pouvoir tester, on ne sait pas ce que fait vraiment ta fonction ajaxGet mais on va supposer qu'elle retourne bien ce que tu exploites.

• Pour moi la méthode setMarker devrait être

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
setMarker: function() {                             // Creation marqeurs
    "use strict";
    var manager = Object.create(MarkerManager);     // Creation objet avec MarkerManager prototype
 
    ajaxGet(this.url, function(reply) {
        var locations = JSON.parse(reply);          // Creation array avec la réponse de l'API
        locations.forEach(function(location) {      // For each "location" de l'array "locations"
            //MarkerManager.init(location);         // Creation d'un nouveau marqueur
            manager.init(location);                 // Creation d'un nouveau marqueur
            //manager.showDetails(location);        // Montrer les détails du marqueur au clic
        });
        manager.pushMarker();                       // Creation du MarkerClusterer
    });
}

tu devrais trouver la différence.

• Concernant la méthode init de l'objet MarkerManager, tu initialises un markers mais tu ne l'ajoutes pas, ce n'est pas le bon.

Cela devrait ressembler à

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
var MarkerManager = {
    markers: [],
    // Créé un nouveau marqueur
    init: function(location) {
        "use strict";
        var marker = new google.maps.Marker({
            // marker = new google.maps.Marker({
            map: createMap.map,
            position: location.position,
            title: location.name,
            icon: "images/biker_green.png"
        });
        // Ajoute le marqueur à l'array "markers"
        this /*MarkerManager*/ .markers.push(marker);
        // MarkerManager.markers.push(MarkerManager.marker);
    },
 
    pushMarker: function() { // Créé le MarkerClusterer
        "use strict";
        var markerCluster = new MarkerClusterer(createMap.map, this /*MarkerManager*/ .markers, {
        //var markerCluster = new MarkerClusterer(createMap.map, MarkerManager.markers, {
            imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
        });
    }
};

On pourrait faire autrement en déclarant une propriété marker à ton objet mais bon.

Au passage les noms sont à mon sens mal choisis, init devrait être add, pushMarker devrait être attach par exemple, mais c'est du détail.

Une dernière chose, j'ajouterais dans la méthode initCarte l'appel à la méthode setMarker mais tu dois quoiqu'il arrive l'appeler ailleurs.

Encore un dernier point, tu sais que tu peux faire la même chose avec Leaflet par exemple

[Elztx]

Hello,
Merci pour ta réponse,
Je regarde tout ça ce soir !

[Elztx]

Hello,

Je viens donner des news et surtout te remercier.
Merci beaucoup x1000.

Je passe le sujet en !

Je comprends pas toujours ce que j'applique en JS, j'ai beaucoup de mal, j'espère que ça ira pour la suite, sinon à très vite aha