Personnalisation Maps sur page HTML via JS

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
La bouée
Messages : 3
Enregistré le : 09 mars 2021, 14:38

Personnalisation Maps sur page HTML via JS

Message par La bouée » 09 mars 2021, 14:40

Bonjour,

Tout d'abord, je suis désolé, je ne m'y connaîs que peu en javascript, du coup je galère un peu à essayer de dépatouiller mon truc.
Même si je pense savoir où va se situer mon ajout/ma modification, j'ai du mal à savoir comment je peux le faire.

Je cherche à ajouter, sur une carte google intégrée à une page .html, des marques personnalisées, dont j'ai les coordonnées géographiques (latitude/longitude).
L'objet que je cherche à modifier est tiré du github suivant:

https://github.com/mak08/VRDashboard/issues

Sur l'onglet map de la page dashboard.html doivent apparaître deux types d'objets:
- Des coordonnées récupérées en automatique (qui sont déjà codés/ qui apparaîssent bien/ qui fonctionnent);
- Des coordonnées personnalisées: ça, c'est le point que je souhaite résoudre.

Je souhaite, et j'imagine que cela se passera dans l'objet dashboard.js de ce que vous trouverez sur le github un peu plus haut, ajouter un certain nombre de points dont j'ai les coordonnées complètes.
Je suis à peu près certain que cela se passe donc dans le fichier dashboard.js, sachant que les coordonnées récupérées en automatique le sont justement grâce à ce qui est inclus dans le code de ce fichier .js.

Je me heurte à deux écueils:
- Où le placer dans le code?
- Une fois l'endroit trouvé, comment le faire?
J'ai trouvé, en fouinant un peu, des lignes de codes qui permettent de centrer, par exemple, la carte sur un point donné .
Mais pas l'affichage de plusieurs points... Du coup je suis un peu paumé.
J'ai essayé aussi de regarder ce que la fonction Geocoder permet mais bon, sans succès?


Si possible de me donner quelques indications?

Merci beaucoup!

Avatar du membre
webmaster
Administrateur du site
Messages : 396
Enregistré le : 28 févr. 2017, 15:19

Re: Personnalisation Maps sur page HTML via JS

Message par webmaster » 10 mars 2021, 10:08

Bonjour,

La création d'un Gmaps demande un peu de préparation.
Il faut une clé API pour activer la carte
https://developers.google.com/maps/docu ... et-api-key
Cela permet de creer un objet map :

Code : Tout sélectionner

    map = new google.maps.Map(
        document.getElementById("map"), {
          draggableCursor:"move",
          zoom: zoom, 
          streetViewControl: false,
          fullscreenControl: false,
          mapTypeControl: false,
          scaleControl: false,
          mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.BOTTOM_LEFT
          },
          center: france
        }
    );
Ensuite, les possibilités sont nombreuses, mais le principe est simple :

Code : Tout sélectionner

pointeur = new google.maps.Marker({
     position: {lat: latitude, lng: longitude},
     draggable:true,
     map,
     title: "Mon objet"
});
Pour info, je travaille sur ce sujet sur le projet https://www.mellifere.com/
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

La bouée
Messages : 3
Enregistré le : 09 mars 2021, 14:38

Re: Personnalisation Maps sur page HTML via JS

Message par La bouée » 20 mars 2021, 18:40

Salut,
Désolé pour le délai de réponse.
Merci beaucoup pour ton message !
Pour la création de l'objet map, j'pense que c'est OK vu que cela tourne déjà sur l'extension que j'essaie de modifier.
J'ai la clé de mon API aussi, là de ce côté, on est bon aussi.

Du coup, j'imagine que mon souci va se situer là;

Code : Tout sélectionner

pointeur = new google.maps.Marker({
     position: {lat: latitude, lng: longitude},
     draggable:true,
     map,
     title: "Mon objet"
});
Déjà: où le mettre dans le code? Je ne sais si tu as vu la longueur du dashboard.js que je veux bidouiller, j'ai un peu peur de le mettre n'importe où, ahah.
Et aussi: puis-je en ajouter "indéfiniment"?

Suis vraiment désolé, ce choses-là c'est pas mon truc, je le fais car on en a besoin, sinon, je m'y frotterai pas :D

Merci encore!

Avatar du membre
webmaster
Administrateur du site
Messages : 396
Enregistré le : 28 févr. 2017, 15:19

Re: Personnalisation Maps sur page HTML via JS

Message par webmaster » 22 mars 2021, 10:26

L'objet map existe déjà sur la page, mais il faut le décrire en objet JS

A priori, on ajoutant ce code à la fin de la page HTML (en remplacant IDduTagMapSurLaPageHTML), il devrait afficher l'élément sur la carte

Code : Tout sélectionner

var map=document.getElementById("IDduTagMapSurLaPageHTML");
pointeur = new google.maps.Marker({
     position: {lat: latitude, lng: longitude},
     draggable:true,
     map,
     title: "Mon objet"
});

Dans tous les cas, il faut regarder ce qu'affiche la console du navigateur. Voir le tuto :
https://www.toutjavascript.com/savoir/n ... script.php
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

La bouée
Messages : 3
Enregistré le : 09 mars 2021, 14:38

Re: Personnalisation Maps sur page HTML via JS

Message par La bouée » 22 mars 2021, 10:32

mille mercis! je vais m'y atteler :)

Répondre