Google map API - plusieurs icones sur ma carte

**le Jeu Juin 26, 2008 15:34**

onjour,
Je viens de mettre en place une carte de mes clients sur mon site (google map API)

http://novorest.free.fr/infos/refgoogle.htm

J'aimerais proposer diverses icones en fonction du type de client (par ex hopital et ecole) en lieu et place de la pastille rouge proposée par google

Voici le code de ma page (seulement 2 clients apparaissent, j'ai effacé tous les autres pour faire plus court)

Cette page htm est générée à partir d'une base de données (superbase) et comprend tout (pas de fichier autre ou base de données sur le site

Si quelqu'un a des infos pour
1/ définir les différentes icones dans le script -
2/ insérer dans chaque "adresse" le type d'icone à présenter
je suis preneur

Merci d'avance

Daniel

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"sur http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd [ Lien ]">
<html xmlns="sur http://www.w3.org/1999/xhtml [ Lien ]">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/..."
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(46.85, 1.75), 6, G_SATELLITE_TYPE);
map.addMapType(G_PHYSICAL_MAP);
map.addMapType(G_SATELLITE_3D_MAP);

function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
"DEBUT VARIABLES"

var point = new GLatLng(45.194013,0.730981);
var marker = createMarker(point,'<div class="texte-8"><font face="Verdana" size="1"><b>Perigueux ( 24)</b><br>Construction de la cuisine centrale de l\'hopital<br> 2500 repas<br>CO TRAIT. MOE - Mission achevee ( 1993)<br><img src="sur http://novorest.free.fr/infos/goph/00.jpg [ Lien ]" border="0" height="135" width="100"><br><a href="sur http://novorest.free.fr/ref/hosp/peri1.htm [ Lien ]">Infos + >></a><br></font></div>')
map.addOverlay(marker);
var point = new GLatLng(48.894290,2.236727);
var marker = createMarker(point,'<div class="texte-8"><font face="Verdana" size="1"><b>Paris ( 75)</b><br>APS pour les restaurants de la Tour sans Fins a la Defense<br> 2000 repas<br>SS TRAIT. MOE - Mission achevee ( 1991)<br><img src="sur http://novorest.free.fr/infos/goph/00.jpg [ Lien ]" border="0" height="135" width="100"><br><a href="sur http://novorest.free.fr/ref/trav.htm [ Lien ]">Infos + >></a><br></font></div>')
map.addOverlay(marker);

? "FIN VARIABLES"
}
}
//]]>
</script>
</head>
<body onload="load();" onunload="GUnload();">
<p> </p>
<div id="map" style="width: 900px; height: 600px"></div>
</body>
</html>

**le Jeu Juin 26, 2008 17:31**

Bouton de droite "Afficher la source"

http://www.skitour.fr/sommets/dome-des-ecrins,238.html

**le Jeu Juin 26, 2008 18:07**

Bonsoir

Merci pour le lien

J'ai récupéré en bas de cette page le script qui à mon sens gère la carte

Je l'ai collé dans ma page

Mais ca ne fonctionne pas .... quelqu'un à la clef ?

Voici le code de cette page modifiée

Merci d'avance

Daniel

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAADlpaObC2qV5Xul00bK-QYRQXgt1ZrYtnoWm9ueknCRnaDYA9bBT3BXDS90ehzyUAFqO07JpQ1zDJyQ"
type="text/javascript">

</head>
<body onload="load();" onunload="GUnload();">
<p> </p>
<div id="map" style="width: 900px; height: 600px"></div>
</body>
</html>

<script type="text/javascript">

function affiche_cartes(ckb, carte)
{
if (ckb.checked) map.addOverlay(carte);
else map.removeOverlay(carte);
}

//<![CDATA[
if (GBrowserIsCompatible())
{
// Icones
var baseIcon = new GIcon();
baseIcon.iconSize=new GSize(32,32);
baseIcon.shadowSize=new GSize(56,32);
baseIcon.iconAnchor=new GPoint(16,32);
baseIcon.infoWindowAnchor=new GPoint(16,0);

var refuge = new GIcon(baseIcon, "http://www.skitour.fr/images/maps/refuge.png", null, "http://www.skitour.fr/images/maps/refuge_s.png");
var depart = new GIcon(baseIcon, "http://www.skitour.fr/images/maps/depart.png", null, "http://www.skitour.fr/images/maps/depart_s.png");
var sommet = new GIcon(baseIcon, "http://www.skitour.fr/images/maps/sommet.png", null, "http://www.skitour.fr/images/maps/sommet_s.png");

// Fonction Marqueur
function createMarker(point, txt, icon, nom)
{
var marker = new GMarker(point, {icon: icon, title: nom});
GEvent.addListener(marker, "click", function()
{
marker.openInfoWindowHtml(txt);
});
return marker;
}

// déclaration de la map
var map = new GMap2(document.getElementById("map"));

// Ajout des contrôles
map.addMapType(G_PHYSICAL_MAP);
map.addMapType(G_SATELLITE_3D_MAP);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.enableScrollWheelZoom();

// Centrage de la carte
map.setCenter(new GLatLng(44.92426,6.35337),11);

// Type relief
map.setMapType(G_PHYSICAL_MAP);

// Tracé points caractéristiques
var point = new GLatLng(44.92426, 6.35337); map.addOverlay(createMarker(point,"<strong>Dôme des Ecrins (4015 m)</strong>",sommet,"Dôme des Ecrins"));
var point = new GLatLng(44.93258, 6.29254); map.addOverlay(createMarker(point,"<strong><a href='../departs/la-berarde,70.html'>La Bérarde (1720 m)</strong></a><br />Itinéraires liés à 'Dôme des Ecrins' :<br />- <a href='../topos/dome-des-ecrins,3032.html'>Traversée de la Brèche Lory </a><br />- <a href='../topos/dome-des-ecrins,205.html'>Par le Col des Ecrins</a>",depart,"La Bérarde"));
var point = new GLatLng(44.91645, 6.41724); map.addOverlay(createMarker(point,"<strong><a href='../departs/pre-de-madame-carle,82.html'>Pré de Madame Carle (1874 m)</strong></a><br />Itinéraires liés à 'Dôme des Ecrins' :<br />- <a href='../topos/dome-des-ecrins,220.html'>versant N depuis le Pré de Madame Carle </a>",depart,"Pré de Madame Carle"));
var point = new GLatLng(44.8822, 6.4431); map.addOverlay(createMarker(point,"<strong><a href='../departs/ailefroide,339.html'>Ailefroide (1522 m)</strong></a><br />Itinéraires liés à 'Dôme des Ecrins' :<br />- <a href='../topos/dome-des-ecrins,3060.html'>Traversée Ailefroide-Villard d'Arène </a>",depart,"Ailefroide"));
var point = new GLatLng(44.99826, 6.30318); map.addOverlay(createMarker(point,"<strong><a href='../refuges/refuge-du-promontoire,53.html'>Refuge du Promontoire (3082 m)</strong></a>",refuge,"Refuge du Promontoire"));
var point = new GLatLng(44.94726, 6.38302); map.addOverlay(createMarker(point,"<strong><a href='../refuges/refuge-des-ecrins,55.html'>Refuge des Ecrins (3175 m)</strong></a>",refuge,"Refuge des Ecrins"));
var point = new GLatLng(44.9376, 6.4118); map.addOverlay(createMarker(point,"<strong><a href='../refuges/refuge-du-glacier-blanc,56.html'>Refuge du Glacier Blanc (2542 m)</strong></a>",refuge,"Refuge du Glacier Blanc"));
var point = new GLatLng(44.90422, 6.33273); map.addOverlay(createMarker(point,"<strong><a href='../refuges/refuge-de-temple-ecrins,116.html'>Refuge de Temple Ecrins (2410 m)</strong></a>",refuge,"Refuge de Temple Ecrins"));
var tab3436ET = new Array();
tab3436ET[1] = new GLatLng(45.053994,6.229203);
tab3436ET[2] = new GLatLng(45.053995,6.508213);
tab3436ET[3] = new GLatLng(44.82,6.508216);
tab3436ET[4] = new GLatLng(44.819998,6.229204);
tab3436ET[5] = new GLatLng(45.053994,6.229203);
carte3436ET = new GPolygon(tab3436ET, "#FF0000", 2, 0.7, "#FF0000", 0.1);
}
//]]>
</script>

**le Jeu Juin 26, 2008 18:39**

il faut que tu colle la clé qui correspond à ton site...

<script src="http://maps.google.com/maps?file=api&v=2&key=TA_CLE_ICI" type="text/javascript"></script>

**le Jeu Juin 26, 2008 22:29**

salut,
http://econym.googlepages.com/basic16.htm
voila

**le Ven Juin 27, 2008 5:05**

Bonjour

Merci pour ces éléments

En ce qui concerne la "clef", c'etait une façon de parler .... J'ai bien pigé cette notion de clef générée pour mon site et l'ai bien intégrée dans ma page

Je regarde le dernier lien et essaye d'en tirer des infos .... Mais il fonctionne avec un fichier externe xml, ce qui n'est pas mon cas ....

A bientot

Daniel

**le Ven Juin 27, 2008 5:36**

Re bonjour

J'ai bien avancé, encore merci pour les liens

Je bute désormais sur les fenetres générées dans le fichier xml

Comment faire pour y caser plusieurs lignes ? Y insérer une image ? un lien hypertexte ?

J'ai bien essayé de créer une ligne avec <br> mais ca ne marche pas .....

<markers>

<marker lat="45.1940" lng="0.7309" html="Perigueux" label="Perigueux" icontype="yellow"/>
<marker lat="48.894290" lng="2.2367" html="Paris" label="Paris" icontype="purple"/>
<marker lat="48.82589" lng="3.10040" html="Some stuff to display in the<br>Third Info Window" label="Marker Three" icontype="ecole"/>
</markers>

Merci pour votre aide

Google map API - plusieurs icones sur ma carte

Google map API - plusieurs icones sur ma carte

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne