18041 sujets

Questions générales et questions de débutants

Google map et fichiers kml

Pages :
Bonjour

Je cherche à faire une carte avec quelques "points remarquables".
La solution apparemment la plus commune consiste à utiliser Google map et à joindre un fichier de description de "points remarquables" en format xml, dit "kml"

Pas de difficulté pour ouvrir une carte centrée aux coordonnées que je lui donne, ni pour attacher le fichier kml et afficher des "bulles" aux points désignés.
Par contre je n'arrive pas à trouver dans la documentation Google comment changer la forme et la couleur des bulles, afficher un texte à côté, faire quelque chose au survol etc.

La documentation Google est faite pour "ceux qui savent", ce qui n'est pas très pratique pour ceux qui démarrent, et elle insiste sur des tas de fonctionnalités dont je n'ai pas besoin, mais les fonctionnalités simples doivent être tellement évidentes qu'elles ne sont pas mentionnées.
Auriez vous un document simple à me signaler, ou un exemple basique que je puisse utiliser comme modèle?

Merci de votre aide.
Salut Papy,

Je m'y suis essayé il y a quelque temps, pour arriver à des rendus de ce type : Maps.

Mais contrairement à toi je n'ai pas utilisé de fichier xml, je suis resté en js, mais a priori cela ne change pas grand chose.

Le fichier source de la carte précédente : Maps.js. Tu y trouveras des liens vers des ressources et quelques explications que j'ai laissé pour mes besoins personnels.
Modifié par Olivier C (15 May 2016 - 18:21)
Merci Olivier
Je me demande effectivement s'il n'est pas plus simple de faire un programme en JS que d'utiliser un fichier kml
J'ai passé l'après midi à essayer de m'y retrouver dans ce dédale.
Je suis parti d'un fichier kml trouvé sur internet et qui est proche de ce que je veux faire, mais la documentation est tellement bizarre que je ne parviens pas, par exemple, à changer la couleur des icônes des points d'intérêt, sans parler de faire afficher un texte à côté de chaque point. Et pourtant tout semble indiquer que c'est faisable...
J'arrête pour ce soir
Smiley rale
Bonsoir,

L'un de mes clients 'conçoit' ses calques sur Google My Maps, et les exporte en kmz.
J'importe sur son site les calques et images et j'associe le tout sur une google map.

Donc peut-être se servir de Google My Maps (différent de google maps) pour faire ton kmz...?
@Manhattan
Volià une piste intéressante!
J'ai effectivement fait un premier essai avec Google My Maps, et j'étais à peu près arrivé à obtenir la présentation que je veux maintenant rendre "publique" (alors que Google My Maps est privé aux abonnés Google+)
Je vais regarder ca demain.
@pictural
Merci de ta réponse, mais je préférerais utiliser le mécanisme des fichier kml, qui met les points d'intérêt dans un fichier à part, avec des informations qui s'affichent automatiquement quand on clique sur un point, etc.
Le problème, c'est que je suis proche du résultat que je cherche à obtenir, mais que je ne parviens pas à finaliser parce que je ne m'y retrouve pas dans la documentation du produit, et c'est extrêmement frustrant!
Après investigation, il semble que Google Earth prenne bien en compte les ordres <BalloonStyle> et <IconStyle> mais que cela ne fonctionne pas avec Googe Maps.

Quelqu'un aurait il une idée de contournement?
@pictural
Oui, j'ai lu et appliqué ces documents.
J'ai eu confirmation par le forum des applications Google que le produit Gooble Maps ne prend pas actuellement les paramètres <Style> En compte, contraire à Google Earth.
Il n'y a donc rien d'autre à faire que de coder ce que l'on veut en Javascript.
Ce n'est pas que ce soit particulièrement difficile à faire, mais c'est une perte de temps et d'efforts.
Cher PapyJP,
pour m'en tenir à ton topique, mon exemple perso est d'actu :
http://sentrais.eu/chinon-art/js/map-index.js
et par les scripts suivants de page en page qui démultiplient les "pins" en img .png et les personnalisent à souhait avec info-bulles millimétrées en .css ! sauf le padding qui m'est apparu impossible, or avec un lien <a href=\"_ .html\">_</a> cliquable.
Pardon de dire que je n'ai rien vu de plus simple avant (ni après) septembre 2015.
Maintenant en mai 2016 ? J'imagine que c'est un peu (beaucoup) comme les imels en html où un .css générique et cross-browser demeure une conquête à conquérir.
Modifié par pictural (18 May 2016 - 01:11)
@pictural
Merci de partager ton code, je vais m'en inspirer, ça va m'éviter de tout reprendre à zéro.
@Manhattan,
mdr ! et merci pour le clin d'oeil ; ma tautologie licencieuse ou rhétorique aura été la dernière pensée révélée avant de m'affaler de sommeil hier soir sur une couche bien ferme comme je l'aime ...
Smiley smile
J'avais peur que mon message taquin ne soit mal pris.
Au début, ta formulation surprend, et peut en énerver certains, mais au bout de quelques temps, elle apporte un certain charme au forum comme toute diversité.
PapyJP : désolé d'avoir pollué ton post : les résultats de tes recherches sur les calques m'intéressent donc au final si tu les partages, nous serons nombreux à les lire. J'étudierai aussi le code de Pictu.
@PapyJp,
j'ai apporté une correction minime au .js
Le principe en demeure toutefois inchangé :
1. créer 2 listes ordonnées (img personnalisées, localisations diverses)
2. associer et conjuguer les 2 listes
3. jouer de style .css pour le texte des InfoWindow()
4. créer un event (au click) pour ouvrir alternativement les infowindow

Quant à la page
http://sentrais.eu/chinon-art/tout.htm
le .js est différent car il associe des liens externes à la map3 (c-à-d depuis des id="_" du .html) aux propositions de la map3 (pin's et infowindow), afin d'ouvrir au click une infowindow dans la map3. Je reconnais avoir dû cravacher mes neurones plutôt furieusement afin de comprendre l'énigmatique trigger .js, et d'obtenir la bonne synthèse des diverses propositions du web. Et finalement cela fonctionne également :
http://sentrais.eu/chinon-art/js/map-tout.js

upload/59366-ex21.jpg
Modifié par pictural (20 May 2016 - 12:37)
Sympa, par contre c'est assez dénudé comme style. Bon vu la région et surtout la raison d'être de cette carte c'est certainement voulu.
Quand je veux styler une carte, avant de partir dans des tests, je regarde déjà des set tout faits :

https://snazzymaps.com/explore

On peut chercher par mot clé. Ensuite ce n'est que du code à adapter.
Pages :
Sujet clos
Aller à