jadoud
Messages postés19Date d'inscriptionmercredi 9 décembre 2009StatutMembreDernière intervention23 mars 2011
-
23 mars 2011 à 21:50
cs_rt15
Messages postés3874Date d'inscriptionmardi 8 mars 2005StatutModérateurDernière intervention 7 novembre 2014
-
15 mai 2011 à 19:11
bonsoir
dans de le cadre de mon projet je doit afficher des points sur un map google dont les corrdonee son enrigistre dans un ficher XMl
j'ai utliser ce code mais aucun marker qui s'affiche seul la map vide
code html
<%--
Document : index
Created on : 20 mars 2011, 21:12:55
Author : AHMED
--%>
<%@page contentType= "text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<?xml version="1.0" encoding="utf-8"?>
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TouraineVerte ma première carte</title>
<!-- Chargement du script Google AJAX APIs en précisant votre clé -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=Inserez_Votre_Clef_API_Ici"></script>
<script type="text/javascript">
//<![CDATA[
/* Chargement du module "maps" dans sa version "2.x" */
google.load("maps", "2.x",{"other_params":"sensor=false"});
/* Déclaration des variables globales */
var contenuListe = "";
var tableauMarqueurs = [];
var tableauInfoBulle = [];
var i = 0;
var miniIconeVert;
var maCarte;
/* Déclaration explicite de la variable "urlXml" : Elle contient le chemin et le nom du fichier XML contenant les données des sociétés, nécessaire à la construction de la carte. */
/* Il est impératif que le document qui execute ce code soit sur le même serveur que le fichier contenant les données (data.xml). */
/* Veuillez IMPÉRATIVEMENT modifier l'Url ci-dessous afin qu'elle pointe vers votre fichier data.xml */
var urlXml = "http://localhost:37637/data.xml";
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ... Paramétrage du mini icône vert nommé "miniIconeVert" ... */
miniIconeVert = new google.maps.Icon();
miniIconeVert.image = "http://labs.google.com/ridefinder/images/mm_20_green.png";
miniIconeVert.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
miniIconeVert.iconSize = new google.maps.Size(12, 20);
miniIconeVert.shadowSize = new google.maps.Size(22, 20);
miniIconeVert.iconAnchor = new google.maps.Point(6, 20);
miniIconeVert.infoWindowAnchor = new google.maps.Point(5, 1);
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise
ayant pour identifiant id="EmplacementDeMaCarte" ... */
maCarte = new google.maps.Map2(document.getElementById("EmplacementDeCarteGlobale"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
maCarte.setCenter(new google.maps.LatLng(47.391174,0.722265), 9);
/* ... Ajout à la carte nommée "maCarte" du bouton "SmallMapControl" : Déplacement et Zoom ... */
maCarte.addControl(new google.maps.SmallMapControl());
/* ... Ajout à la carte nommée "maCarte" du bouton "MenuMapTypeControl" : Menu Type de carte ... */
maCarte.addControl(new google.maps.MenuMapTypeControl());
/* ... A l'aide de google.maps.XmlHttp on construit, puis on envoie une requête, de type GET, pour charger les données contenues dans ... */
/* ... "http://www.votreserveur.fr/votrerepertoire/data.xml" et récupérer les caractéristiques de ... */
/* ... chaque marqueur (lat, lng, point, type, nom) nécessaire à sa construction ... */
var requete = google.maps.XmlHttp.create();
requete.open("GET", urlXml, true);
/* ... Spécifie la fonction à appeler lorsque la propriété readyState varie ... */
requete.onreadystatechange = function() {
/* ... Si l'état d'avancement de la requête est égal à 4 : autrement dit si la requête à parfaitement fonctionné, ... */
/* ... que les données ont été correctement téléchargées et que celles-ci sont disponibles pour être exploitées ... */
if (requete.readyState == 4) {
/* ... "xmlDoc" contient la réponse de la requête au format XML ... */
var xmlDoc = requete.responseXML;
/* ... "marqueurs" : est un tableau contenant toutes les balises <marker /> du fichier "data.xml" ... */
var marqueurs = xmlDoc.documentElement.getElementsByTagName("marker");
/* ... Construction de la liste de sociétés : Début ... */
contenuListe += '<ol>';
/* ... On fait une boucle sur "marqueurs" pour extraire les caractéristiques de chaque marqueur ... */
/* ... et permettre l'affichage de ceux-ci sur la carte ainsi que la construction de la liste . ... */
for (var i = 0; i < marqueurs.length; i++) {
/* ... lat : Latitude du marqueur ... */
var lat = parseFloat(marqueurs[i].getAttribute("lat"));
/* ... lng : Longitude du marqueur ... */
var lng = parseFloat(marqueurs[i].getAttribute("lng"));
/* ... pointSoc : point d'ancrage du marqueur, aux coordonnées "lat" et "lng" ... */
var pointSoc = new GLatLng(lat,lng);
/* ... typeSoc : Catégorie d'appartenance du marqueur ... */
var typeSoc = marqueurs[i].getAttribute("type");
/* ... nomSoc : Nom de la société correspondant au marqueur ... */
var nomSoc = marqueurs[i].getAttribute("nom");
/* ... adresseSoc : Adresse postale de la société correspondant au marqueur ... */
var adresseSoc = marqueurs[i].getAttribute("adresse");
/* ... codepostalSoc : Code postal de la société correspondant au marqueur ... */
var codepostalSoc = marqueurs[i].getAttribute("codepostal");
/* ... villeSoc : Ville de la société correspondant au marqueur ... */
var villeSoc = marqueurs[i].getAttribute("ville");
/* ... Création du marqueur nommé "marqueur" par appel de la fonction "creationMarqueur()" ... */
/* ... en lui transmettant les données : lat, lng, pointSoc, typeSoc, nomSoc ... */
var marqueur = creationMarqueur(lat,lng,pointSoc,typeSoc,nomSoc,adresseSoc,codepostalSoc,villeSoc);
/* ... Affiche sur la carte nommée "maCarte", le marqueur nommé "marqueur" ... */
maCarte.addOverlay(marqueur);
}
contenuListe += '</ol>';
document.getElementById("EmplacementDeLaListe").innerHTML = contenuListe;
}
}
requete.send(null);
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}else{
/* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
}
}
/* Fonction creationMarqueur() */
function creationMarqueur(lat,lng,pointSoc,typeSoc,nomSoc,adresseSoc,codepostalSoc,villeSoc) {
var marqueur = new google.maps.Marker(pointSoc,miniIconeVert);
/* ... contenuInfoBulle : construction du code HTML destiné à s'afficher dans l'info-bulle du marqueur ... */
var contenuInfoBulle = ' Société : '+nomSoc+'
'
+'Catégorie : '+typeSoc+'
'
+'Adresse : '+adresseSoc+'
'
+'Code postal : '+codepostalSoc+'
'
+'Ville : '+villeSoc+'
'
+'Latitude : '+lat+'
'
+'Longitude : '+lng;
/* ... Ajout d'un observateur d'événement au marqueur nommé marqueur" ... */
/* ... L'événement observé est le "click". Quant un "click" sera détecté ... */
/* ... sur le marqueur nommé "marqueur" alors ... */
google.maps.Event.addListener(marqueur, "click", function() {
/* ... Ouverture de l'info-bulle liée au marqueur nommé "marqueur" et ... */
/* ... affichage à l'intérieur de celle-ci du code HTML "contenuInfoBulle" ... */
marqueur.openInfoWindowHtml(contenuInfoBulle);
});
/* ... Insère le marqueur nommé "marqueur" dans le tableau nommé "tableauMarqueurs" à l'indice "i" ... */
tableauMarqueurs[i] = marqueur;
/* ... Insère le code HTML "contenuInfoBulle" dans le tableau nommé "tableauInfoBulle" à l'indice "i" ... */
tableauInfoBulle[i] = contenuInfoBulle;
/* ... Ajout à "contenuListe" du lien javascript correspondant à la société ... */
contenuListe += '<li>[javascript:clickLien(' + i + ') ' + nomSoc + ']</li>';
/* ... Incrémente "i" ... */
i++;
return marqueur;
}
/* Fonction clickLien() */
function clickLien(i) {
/* ... Tout click sur le lien ayant pour indice "i", va déclencher l'ouverture de l'info-bulle ... */
/* ... liée au marqueur d'indice "i" contenu dans le tableau "tableauMarqueurs[i]" et afficher ... */
/* ... à l'intérieur de celle-ci, le code HTML d'indice "i" contenu dans le tableau tableauInfoBulle[i] ... */
tableauMarqueurs[i].openInfoWindowHtml(tableauInfoBulle[i]);
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée. */
google.setOnLoadCallback(initialize);
//]]>
</script>
<style type="text/css">
<!--
#Container {
position:relative;
width:100%;
height:400px;
border: none;
}
#EmplacementDeCarteGlobale {
float: left;
width: 60%;
height: 400px;
border: none;
}
#EmplacementDeLaListe {
overflow: auto;
float: right;
position: relative;
width: 40%;
height: 400px;
border: none;
background-color: #fff;
}
#EmplacementDeLaListe a{text-decoration:none;}
</style>
</head>
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise
ayant pour identifiant id="EmplacementDeCarteGlobale". -->
<!-- La liste des sociétés va s'afficher dans la balise
ayant pour identifiant id="EmplacementDeLaListe".. -->
</html>
