Accueil > Forum > > > > google map
 google map
mercredi 23 mars 2011 à 21:50:01 |
google map
jadoud
|
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
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 <div> 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 = '<b>Société</b> : '+nomSoc+'<br />'
+'<b>Catégorie</b> : '+typeSoc+'<br />'
+'<b>Adresse</b> : '+adresseSoc+'<br />'
+'<b>Code postal</b> : '+codepostalSoc+'<br />'
+'<b>Ville</b> : '+villeSoc+'<br />'
+'<b>Latitude</b> : '+lat+'<br />'
+'<b>Longitude</b> : '+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><a href="javascript:clickLien(' + i + ')">' + nomSoc + '</a></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>
<body>
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeCarteGlobale". -->
<!-- La liste des sociétés va s'afficher dans la balise <div> ayant pour identifiant id="EmplacementDeLaListe".. -->
<div class="EncadrementDeMaCarte">
<div id="Container">
<div id="EmplacementDeCarteGlobale"></div>
<div id="EmplacementDeLaListe"></div>
</div>
</div>
</body>
</html>
code XML Code XML : <root>
<markers>
<marker lat="47.391174" lng="0.722265" type="alpha" nom="Société Zeus" adresse="avenue de le République" codepostal="37700" ville="Saint-Pierre-des-Corps"/>
<marker lat="47.417692" lng="0.691023" type="alpha" nom="Société Gaïa" adresse="avenue Maginot" codepostal="37100" ville="Tours"/>
<marker lat="47.382602" lng="0.726686" type="alpha" nom="Société Éros" adresse="rue Grands Mortiers|ZA Grands Mortiers" codepostal="37700" ville="Saint-Pierre-des-Corps"/>
<marker lat="47.382602" lng="0.726686" type="bravo" nom="Société Héméra" adresse="rue Gustave Eiffel|Z.I. N° 1" codepostal="37300" ville="Joué-les-Tours"/>
<marker lat="47.419094" lng="0.693244" type="alpha" nom="Société Nyx" adresse="avenue Andre Maginot" codepostal="37100" ville="Tours"/>
<marker lat="47.419972" lng="0.662138" type="alpha" nom="Société Érèbe" adresse="boulevard Charles de Gaulle" codepostal="37540" ville="Saint-Cyr-sur-Loire"/>
<marker lat="47.419722" lng="0.661333" type="alpha" nom="Société Thanatos" adresse="rue Pierre de Coubertin" codepostal="37540" ville="Saint-Cyr-sur-Loire"/>
<marker lat="47.419777" lng="0.661055" type="alpha" nom="Société Hypnos" adresse="rue Pierre de Coubertin" codepostal="37540" ville="Saint-Cyr-sur-Loire"/>
<marker lat="47.354685" lng="0.673428" type="alpha" nom="Société Éther" adresse="rue de Chambray" codepostal="37300" ville="Joué-les-Tours"/>
<marker lat="47.395328" lng="0.746727" type="bravo" nom="Société Ouranos" adresse="ld Louche Saint Martin" codepostal="37700" ville="la-Ville-aux-Dames"/>
<marker lat="47.358755" lng="0.734775" type="bravo" nom="Société Ouréa" adresse="rue Camusière" codepostal="37550" ville="Saint-Avertin"/>
<marker lat="47.387418" lng="0.760717" type="bravo" nom="Société Pontos" adresse="rue Louise de la Vallière" codepostal="37700" ville="la-Ville-aux-Dames"/>
<marker lat="47.459477" lng="0.674672" type="charlie" nom="Société Nérée" adresse="Z.I Les Gaudières" codepostal="37390" ville="Mettray"/>
<marker lat="47.338365" lng="0.616983" type="charlie" nom="Société Thaumas" adresse="boulevard Jean Jaurès" codepostal="37510" ville="Ballan-Miré"/>
<marker lat="47.464388" lng="0.773388" type="delta" nom="Société Phorcys" adresse="La Petite Baltière" codepostal="37210" ville="Rochecorbon"/>
<marker lat="47.345453" lng="0.542879" type="alpha" nom="Société Céto" adresse="boulevard de Chinon" codepostal="37510" ville="Ballan-Miré"/>
<marker lat="47.253136" lng="0.543823" type="charlie" nom="Société Eurybie" adresse="chemin des Aunays" codepostal="37190" ville="Saché"/>
<marker lat="47.323465" lng="0.918732" type="delta" nom="Société Tartare" adresse="Aérodrome de Tours-Sorigny" codepostal="37250" ville="Sorigny"/>
<marker lat="47.352780" lng="0.952377" type="delta" nom="Société Échidna" adresse="Aérodrome d'Amboise Dierre" codepostal="37150" ville="Dierre"/>
<marker lat="47.547799" lng="0.546355" type="charlie" nom="Société Typhon" adresse="Le Moulin de Pérran" codepostal="37360" ville="Neuillé-Pont-Pierre"/>
<marker lat="47.547799" lng="0.546355" type="alpha" nom="Société Coéos" adresse="route de Loches" codepostal="37170" ville="Chambray-lès-Tours"/>
<marker lat="47.201180" lng="0.652281" type="bravo" nom="Société Crios" adresse="La Laurière - D21" codepostal="37260" ville="37260"/>
<marker lat="47.424277" lng="0.982107" type="delta" nom="Société Japet" adresse="rue du Colombier" codepostal="37530" ville="Pocé-sur-Cisse"/>
<marker lat="47.398349" lng="1.005764" type="alpha" nom="Société Hypérion" adresse="Boulevard Saint Denis Hors (D31)" codepostal="37400" ville="Amboise"/>
<marker lat="47.617273" lng="0.595322" type="delta" nom="Société Océan" adresse="Héliport de Belleville" codepostal="37370" ville="Neuvy-le-Roi"/>
<marker lat="47.164742" lng="0.786381" type="delta" nom="Société Cronos" adresse="Le Louroux" codepostal="37240" ville="Le-Louroux"/>
<marker lat="47.451308" lng="0.320320" type="delta" nom="Société Thémis" adresse="Les Champs Marquis" codepostal="37340" ville="Savigné-sur-Lathan"/>
<marker lat="47.254184" lng="0.300922" type="charlie" nom="Société Mnémosyne" adresse="rue Principale" codepostal="37420" ville="Rigny-Ussé"/>
<marker lat="47.154945" lng="1.010517" type="delta" nom="Société Théia" adresse="Les Jolletières" codepostal="37600" ville="Loches"/>
<marker lat="47.285197" lng="1.159358" type="delta" nom="Société Rhéa" adresse="Les Bruyères" codepostal="41400" ville="Saint-Georges-sur-Cher"/>
<marker lat="47.343083" lng="1.185086" type="delta" nom="Société Téthys" adresse="rue Nationale" codepostal="41400" ville="Montrichard"/>
<marker lat="47.063808" lng="0.492325" type="charlie" nom="Société Brontès" adresse="le Village du Bois" codepostal="37220" ville="Rilly-sur-Vienne"/>
<marker lat="47.504830" lng="1.196705" type="delta" nom="Société Stéropès" adresse="route de Chouzy" codepostal="41150" ville="Onzain"/>
<marker lat="47.166573" lng="0.239178" type="alpha" nom="Société Argès" adresse="rue du Commerce" codepostal="37500" ville="Chinon"/>
</markers>
</root>
si possible que vous me aider c tres urgent merci
:( :'(  |
|
dimanche 15 mai 2011 à 19:11:16 |
Re : google map
|
Cette discussion est classée dans : code, google, maps, marqueur, macarte
 Répondre à ce message
 Sujets en rapport avec ce message
Recupération d'une adresse d'établissement pour google maps [ par math567 ]
Bonjour, Je souhaiterai récupéré dans une variable javascript le contenu de la valeur d'un champ pour l'utiliser afin de situer le lieu d'un établisse
[API google Maps javascript] affichage page html dans une infobulle [ par abir01 ]
bonjour, je travaille sur google maps javascript, j'ai besoin d'afficher ma page html (qui contient du code JavaScript, et jquery) dans l'infobulle
API Google Maps les markers [ par steppp ]
Bonjour, Je sollicite votre aide pour un problème qui m'étonne. Il me paraîtrait logique qu'il y ait une erreur très simple mais pourtant je réécris
script pour zoom (comme google maps) [ par Rose6 ]
salut, je repose ma question car je n'ai obtenu aucune réponse satisfaisante... connaissez vous un script pour zoomer et se déplacer sur une image (
Probleme actualisation .js [ par woutwout ]
Bonjour, j'essaye de coder une page html qui fait apparaitre une carte de google map, et j'aimerai grâce à un script .js pouvoir changer la position d
Utilisation des Script GoogleMap V3 et les if == [ par ssd ]
Bonjour, Je suis entrain de faire un petit script permettant de visualiser sur une carte google map, la porté d'un relais TPH. Pour cela j'utilise le
Google map API V3 et lire un XML [ par ssd ]
Bonjour, j'ai trouvé sur le web un script pour lire un fichier XML, cf-code mais je n'arrive pas a le faire tourner en local Merci. [code=html]@me
google map & jQuery thickbox [ par math11 ]
salut tout le monde, Actuellement occupé a créer une page de contact avec Google Map, je cherche a appeler un formulaire dans une thickbox depuis une
Problem avec api google maps [ par chobo1210 ]
SLT les gars ok je vais essaye de fair breve j'utilise l'api google maps V3 pour mon site j'ai le map dans un "div" et au dessus un menu deroula
Intégration fonction geocodage - Api Google Map v3 [ par a44icus ]
Bonsoir, J'aimerai intégrer la fonction de géocodage à ma carte google map qui appelle divers marqueur via une base de donnée. J'ai essayé d'intégrer
 Livres en rapport
|
Derniers Blogs
 JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|