Mettre une légende sur une google map

Marsh Posté le 30-05-2016 à 17:21:24

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<Title>Google Map</Title>
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var $ = document;
var gmap = google.maps;
var positioninit;
var carte;
var bulle = new gmap.InfoWindow ({content: '<div id="lucarne"> <table> <tr><td> </td></table></div>'});
var vue = new gmap.StreetViewService();
var geo = new gmap.Geocoder();
var panOptions = {addressControl: true, enableCloseButton: false,linksControl: false, navigationControl: true, pov: {heading: 0, pitch: 0, zoom: 1}}
//init
function initialiser() {
if (lieux[0]) {positioninit = new gmap.LatLng(lieux[0].lat,lieux[0].lon);}
else{positioninit = new gmap.LatLng(49.356559, 6.126826);alert("Pas de points !" )}
carte = new gmap.Map($.getElementById('carte'), {mapTypeId : gmap.MapTypeId.ROADMAP,panControl: false,zoomControl: true,streetViewControl: true,center:positioninit,zoom: 9,disableDefaultUI: false});
for (var i in lieux){afficher(lieux[i]);};
}
// google map avec geocode
function centrer(balise){centrerici(derlat[balise],derlon[balise]);}
function centrerici(lat,lon){var position = new gmap.LatLng(lat,lon);carte.panTo(position)}
function afficher(celieu,anim){
var position = new gmap.LatLng(celieu.lat, celieu.lon);
datainfo = '<table><tr>' + celieu.data + '</tr></table>';
var pointeur = new gmap.Marker({
position: position,
icon: 'http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.4|0|'+ celieu.col +'|8|_|.',
title: celieu.id,
id: celieu.id,
ici: position,
flat: true,
data: datainfo
});
pointeur.setMap(carte);
gmap.event.addListener(pointeur, 'click', function() {
bulle.open(carte, pointeur);
vue.getPanoramaByLocation(pointeur.position, 50, function (resultat, status) {
if (status == gmap.StreetViewStatus.OK) {
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>');
panOptions.position = resultat.location.latLng;
paysage = new gmap.StreetViewPanorama($.getElementById(pointeur.id), panOptions);
paysage.setVisible(true);
gmap.event.addListener(paysage, 'pov_changed', function() {
panOptions.pov = this.getPov();
});
} else {
bulle.setContent('<table><tr><td style="vertical-align: top">'+pointeur.data+'</td></tr><tr><td><div id="'+pointeur.id+'" ></div></td></tr></table>');
$.getElementById(pointeur.id).innerHTML = "<i>Street View indisponible !</i>";
geo.geocode({'latLng': pointeur.ici}, function(results, status) {
if (status == gmap.GeocoderStatus.OK) {
if (results[1]) {
$.getElementById(pointeur.id).innerHTML = (results[1].formatted_address)
}
}
});
}
});
});
}
</script>
<style>
html, body {height:100%;}
#carte{position:absolute;top:0%;left:0%;width:100%;height:100%;}
</style>
<script type="text/javascript">
var lieux = new Array();
//ici liste des points issus d'excel ==========================================
lieux[lieux.length] = {lat: 49.3576006, lon: 6.1678443, col:"4169E1", id: "Mairie Thionville", data: "70003762 - Mairie Thionville<br>Administration"}
//fin de liste ================================================================
</script>
</head>
<body onload="initialiser();">
<div id="vueCarte" style="display: block;"><div id="carte"></div>
</body>
</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.

Marsh Posté le 30-05-2016 à 17:21:24

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *