Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1585 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Mettre une légende sur une google map

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Mettre une légende sur une google map

n°2282625
remdu57
Posté le 30-05-2016 à 17:21:24  profilanswer
 

Bonjour,
 
étant tout nouveau ici, je fais directement le grand saut avec ce petit problème:
En effet j'aimerais légender une google map que je crée à partir d'un tableau Excel, mais je n'y parviens pas.
Du coup je vous colle mon code HTML:
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <head>
  4. <Title>Google Map</Title>
  5. <meta http-equiv="Content-Type" content="text/html;  charset="UTF-8" />
  6. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  7. <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
  8. <script type="text/javascript">
  9. var $ = document;
  10. var gmap = google.maps;
  11. var positioninit;
  12. var carte;
  13. var bulle = new gmap.InfoWindow ({content: '<div id="lucarne"> <table> <tr><td>&nbsp;</td></table></div>'});
  14. var vue = new gmap.StreetViewService();
  15. var geo = new gmap.Geocoder();
  16. var panOptions = {addressControl: true, enableCloseButton: false,linksControl: false, navigationControl: true, pov: {heading: 0, pitch: 0, zoom: 1}}
  17. //init
  18. function initialiser() {
  19. if (lieux[0]) {positioninit = new gmap.LatLng(lieux[0].lat,lieux[0].lon);}
  20. else{positioninit = new gmap.LatLng(49.356559, 6.126826);alert("Pas de points !" )}
  21. carte = new gmap.Map($.getElementById('carte'), {mapTypeId : gmap.MapTypeId.ROADMAP,panControl: false,zoomControl: true,streetViewControl: true,center:positioninit,zoom: 9,disableDefaultUI: false});
  22. for (var i in lieux){afficher(lieux[i]);};
  23. }
  24. // google map avec geocode
  25. function centrer(balise){centrerici(derlat[balise],derlon[balise]);}
  26. function centrerici(lat,lon){var position = new gmap.LatLng(lat,lon);carte.panTo(position)}
  27. function afficher(celieu,anim){
  28. var position = new gmap.LatLng(celieu.lat, celieu.lon);
  29. datainfo = '<table><tr>' + celieu.data + '</tr></table>';
  30. var pointeur = new gmap.Marker({
  31.  position: position,
  32.  icon: 'http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.4|0|'+ celieu.col +'|8|_|.',
  33.  title: celieu.id,
  34.  id: celieu.id,
  35.  ici: position,
  36.  flat: true,
  37.  data: datainfo
  38. });
  39. pointeur.setMap(carte);
  40. gmap.event.addListener(pointeur, 'click', function() {
  41.  bulle.open(carte, pointeur);
  42.  vue.getPanoramaByLocation(pointeur.position, 50, function (resultat, status) {
  43.   if (status == gmap.StreetViewStatus.OK) {
  44.    bulle.setContent('<table><tr><td style="vertical-align: top">'+pointeur.data+'</td></tr><tr><td><div id="'+pointeur.id+'" style="width:320px;height:240px"></div></td></tr></table>');
  45.    panOptions.position = resultat.location.latLng;
  46.    paysage = new gmap.StreetViewPanorama($.getElementById(pointeur.id), panOptions);
  47.    paysage.setVisible(true);
  48.    gmap.event.addListener(paysage, 'pov_changed', function() {
  49.     panOptions.pov = this.getPov();
  50.    });
  51.    } else {
  52.    bulle.setContent('<table><tr><td style="vertical-align: top">'+pointeur.data+'</td></tr><tr><td><div id="'+pointeur.id+'" ></div></td></tr></table>');
  53.    $.getElementById(pointeur.id).innerHTML = "<i>Street View indisponible !</i>";
  54.    geo.geocode({'latLng': pointeur.ici}, function(results, status) {
  55.     if (status == gmap.GeocoderStatus.OK) {
  56.      if (results[1]) {
  57.       $.getElementById(pointeur.id).innerHTML = (results[1].formatted_address)
  58.      }
  59.     }
  60.    });
  61.   }
  62.  });
  63. });
  64. }
  65. </script>
  66. <style>
  67. html, body {height:100%;}
  68. #carte{position:absolute;top:0%;left:0%;width:100%;height:100%;}
  69. </style>
  70. <script type="text/javascript">
  71. var lieux = new Array();
  72. //ici liste des points issus d'excel ==========================================
  73. lieux[lieux.length] = {lat: 49.3576006, lon: 6.1678443, col:"4169E1", id: "Mairie Thionville", data: "70003762 - Mairie Thionville<br>Administration"}
  74. //fin de liste ================================================================
  75. </script>
  76. </head>
  77. <body onload="initialiser();">
  78. <div id="vueCarte" style="display: block;"><div id="carte"></div>
  79. </body>
  80. </html>


 
 
N'hésitez pas à me demander des infos ou quoi que ce soit si besoin.
Et je n'ai laisser qu'un seul point issu d'excel pour raccourcir ce post, et il sert d'exemple.
 
Merci à ceux qui se pencheront dessus.

mood
Publicité
Posté le 30-05-2016 à 17:21:24  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Mettre une légende sur une google map

 

Sujets relatifs
Mettre en place un relai HTTPMettre le résultat d'un ping dans un log
google sheet & XMLAffichage de données temporelles dans Google Earth
Comment mettre à jour plusieurs branches ?Insérer des images avec légende dans word 2010
Connaitre le nombre de visiteur d'un google docComment puis-je mettre en blanc une petie d'un texte ? excel
Afficher le compteur Google Analytics sur un siteMettre en pied de page les valeurs de deux cellules différentes ?
Plus de sujets relatifs à : Mettre une légende sur une google map


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR