CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 10:29:40

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Trucs & Astuces

> GOOGLE MAP API V3 CARTE, MARQUEUR, INFOWINDOWS

GOOGLE MAP API V3 CARTE, MARQUEUR, INFOWINDOWS

Information sur la source

Note :

8,75 / 10

Catégorie :Trucs & Astuces Classé sous :google, javascript, map, api, v3 Niveau :Initié Date de création :26/08/2010 Date de mise à jour :03/09/2010 11:02:06 Vu / téléchargé :10 320 / 923

Auteur : varfendell

Ecrire un message privé

Commentaire sur cette source (34)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Voici un code source très complet qui permet d'afficher autant de marqueur que l'on veut de certain type, d'avoir des information sur ce marqueur lors du clic (infowindows) ou du passage de la souris dessus.

Il est largement possible de recréer le fichier html a partir de php (ce que j'ai fait originalement) afin de récupérer les coordonnées des marqueurs et leur informations dans une base de données.

La source comporte le fichier html (carte.html) et le fichier javascript (carte.js)

Vous pouvez pouvez changer comme bon vous semble les images des marqueurs en les stockant sur votre ordinateur, les nom, les types de marqueurs, bref, régalez vous:

Source

fichier carte.html:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr'>
<head>
<link rel='stylesheet' type='text/css' href='/Styles/Cartes.css'>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script>
<script type='text/javascript' src='carte.js'></script>
</head>
<body>
<h1>Exemple de map Google Map API V3</h1>
<script>
window.onload = function() {
InitTab(8);
var maCarte = new Carte(10, 48, 2, 'ROADMAP');
maCarte.addMarker('<b>marqueur 1/1</b>', 'LAUNAY_LE_CELLIER', 'http://labs.google.com/ridefinder/images/mm_20_green.png', 47.338693626997, -1.3848059582871, 1, 1, true);
maCarte.addMarker('<b>marqueur 1/2</b>', 'LE_CELLIER', 'http://labs.google.com/ridefinder/images/mm_20_green.png', 47.362145084474, -1.3130200410076, 1, 2, true);
maCarte.addMarker('<b>marqueur 1/3</b>', 'ST_NAZAIRE_PLAISANCE', 'http://labs.google.com/ridefinder/images/mm_20_green.png', 47.264707620022, -2.2320914645434, 1, 3, true);
maCarte.addMarker('<b>marqueur 1/4</b>', 'BOUGUENAIS', 'http://labs.google.com/ridefinder/images/mm_20_green.png', 47.17611945074, -1.6152838327546, 1, 4, true);
maCarte.addMarker('<b>marqueur 1/5</b>', 'NANTES_MASSILLON', 'http://labs.google.com/ridefinder/images/mm_20_green.png', 47.210858046639, -1.5645826134606, 1, 5, true);
maCarte.addMarker('<b>marqueur 2/1</b>', 'LA_PLATROUAIS_N137', 'http://labs.google.com/ridefinder/images/mm_20_black.png', 47.537208654814, -1.6381349341563, 2, 1, true);
maCarte.addMarker('<b>marqueur 2/2</b>', 'NANTES_BATIGNOLLES', 'http://labs.google.com/ridefinder/images/mm_20_black.png', 47.248020390746, -1.5254983603493, 2, 2, true);
maCarte.addMarker('<b>marqueur 2/3</b>', 'LE_MARILLAIS_TGV', 'http://labs.google.com/ridefinder/images/mm_20_black.png', 47.374762594645, -1.0980928587849, 2, 3, true);
maCarte.addMarker('<b>marqueur 2/4</b>', 'ORVAULT_BOURG', 'http://labs.google.com/ridefinder/images/mm_20_black.png', 47.270512332113, -1.6097966151195, 2, 4, true);
maCarte.addMarker('<b>marqueur 2/5</b>', 'LE_TEMPLE', 'http://labs.google.com/ridefinder/images/mm_20_black.png', 47.323663191204, -1.7787986998103, 2, 5, true);
maCarte.addMarker('<b>marqueur 3/1</b>', 'GUENROUET_BOURG', 'http://labs.google.com/ridefinder/images/mm_20_red.png', 47.51416895697, -1.9600557836218, 3, 1, true);
maCarte.addMarker('<b>marqueur 3/2</b>', 'NANTES_CITE_DU_VERGER', 'http://labs.google.com/ridefinder/images/mm_20_red.png', 47.223565606577, -1.5295897840249, 3, 2, true);
maCarte.addMarker('<b>marqueur 3/3</b>', 'ST_MARS_LA_JAILLE', 'http://labs.google.com/ridefinder/images/mm_20_red.png', 47.533915569758, -1.195044973351, 3, 3, true);
maCarte.addMarker('<b>marqueur 3/4</b>', 'HERIC', 'http://labs.google.com/ridefinder/images/mm_20_red.png', 47.413381425284, -1.6540326281592, 3, 4, true);
maCarte.addMarker('<b>marqueur 3/5</b>', 'VIEILLEVIGNE_BOURG', 'http://labs.google.com/ridefinder/images/mm_20_red.png', 46.970639548311, -1.4322204370362, 3, 5, true);
maCarte.addMarker('<b>marqueur 4/1</b>', 'ST_NICOLAS_DE_REDON_TDF', 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 47.644316387417, -2.0542722844844, 4, 1, true);
maCarte.addMarker('<b>marqueur 4/2</b>', 'JOUE_SUR_ERDRE', 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 47.508672693704, -1.3958137084406, 4, 2, true);
maCarte.addMarker('<b>marqueur 4/3</b>', 'ST_PERE_GUERCHE', 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 47.219165463614, -2.1326262770197, 4, 3, true);
maCarte.addMarker('<b>marqueur 4/4</b>', 'ST_BREVIN_FH', 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 47.243520881517, -2.1627237872372, 4, 4, true);
maCarte.addMarker('<b>marqueur 4/5</b>', 'NANTES_RD_PT_DE_VANNES', 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 47.228752391061, -1.582705389684, 4, 5, true);
maCarte.addMarker('<b>marqueur 5/1</b>', 'ARTHON_EN_RETZ_TDF', 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', 47.184866467292, -1.9679042847802, 5, 1, true);
maCarte.addMarker('<b>marqueur 5/2</b>', 'ANCENIS_A11', 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', 47.396615201816, -1.2117455385434, 5, 2, true);
maCarte.addMarker('<b>marqueur 5/3</b>', 'REMOUILLE', 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', 47.040920330151, -1.4150862706168, 5, 3, true);
maCarte.addMarker('<b>marqueur 5/4</b>', 'LE_POULIGUEN', 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', 47.281962900418, -2.4239972972879, 5, 4, true);
maCarte.addMarker('<b>marqueur 5/5</b>', 'NANTES_BEAUJOIRE', 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', 47.255929045429, -1.5257388243715, 5, 5, true);
maCarte.addMarker('<b>marqueur 6/1</b>', 'PIRIAC_GRINGOIRE', 'http://labs.google.com/ridefinder/images/mm_20_purple.png', 47.377483492644, -2.5468204272214, 6, 1, true);
maCarte.addMarker('<b>marqueur 6/2</b>', 'CHATEAUBRIANT_FERRIERE', 'http://labs.google.com/ridefinder/images/mm_20_purple.png', 47.704511212689, -1.3885769656162, 6, 2, true);
maCarte.addMarker('<b>marqueur 6/3</b>', 'ST_PERE_EN_RETZ', 'http://labs.google.com/ridefinder/images/mm_20_purple.png', 47.19443346943, -2.0491392312973, 6, 3, true);
maCarte.addMarker('<b>marqueur 6/4</b>', 'PAIMBOEUF', 'http://labs.google.com/ridefinder/images/mm_20_purple.png', 47.286914911868, -2.0371079577192, 6, 4, true);
maCarte.addMarker('<b>marqueur 6/5</b>', 'LIGNE', 'http://labs.google.com/ridefinder/images/mm_20_purple.png', 47.412643812558, -1.3598541016581, 6, 5, true);
maCarte.addMarker('<b>marqueur 7/1</b>', 'NANTES_BASSE_ILE', 'http://labs.google.com/ridefinder/images/mm_20_brown.png', 47.190557874099, -1.5828558523935, 7, 1, true);
maCarte.addMarker('<b>marqueur 7/2</b>', 'LA_HAIE_FOUASSIERE', 'http://labs.google.com/ridefinder/images/mm_20_brown.png', 47.153122864915, -1.386439458749, 7, 2, true);
maCarte.addMarker('<b>marqueur 7/3</b>', 'ST_MOLF', 'http://labs.google.com/ridefinder/images/mm_20_brown.png', 47.389443311289, -2.4192893452327, 7, 3, true);
maCarte.addMarker('<b>marqueur 7/4</b>', 'NANTES_MOULIN_NEUF', 'http://labs.google.com/ridefinder/images/mm_20_brown.png', 47.275988528108, -1.5495520815886, 7, 4, true);
maCarte.addMarker('<b>marqueur 7/5</b>', 'NANTES_AERO_INDOOR', 'http://labs.google.com/ridefinder/images/mm_20_brown.png', 47.157570539755, -1.6019655612934, 7, 5, true);
maCarte.addMarker('<b>marqueur 8/1</b>', 'NANTES_MANUFACTURE', 'http://labs.google.com/ridefinder/images/mm_20_orange.png', 47.219348311025, -1.5331450552771, 8, 1, true);
maCarte.addMarker('<b>marqueur 8/2</b>', 'LES_SORINIERES', 'http://labs.google.com/ridefinder/images/mm_20_orange.png', 47.157502861563, -1.5375905801371, 8, 2, true);
maCarte.addMarker('<b>marqueur 8/3</b>', 'NANTES_GESVRES', 'http://labs.google.com/ridefinder/images/mm_20_orange.png', 47.26856796831, -1.5655387228665, 8, 3, true);
maCarte.addMarker('<b>marqueur 8/4</b>', 'PORNICHET_TDF', 'http://labs.google.com/ridefinder/images/mm_20_orange.png', 47.265150271078, -2.3020472959939, 8, 4, true);
maCarte.addMarker('<b>marqueur 8/5</b>', 'LA_MONTAGNE', 'http://labs.google.com/ridefinder/images/mm_20_orange.png', 47.190039327944, -1.6841589894496, 8, 5, true);
}
</script>
<form id = 'checkbox' name = 'checkbox'>
<input type='checkbox' name= 'All' id='checkAll' onclick='AllBoxClick(this)' checked/>
<label id = 'selectAll' for='selectAll' class='selectAll'>
<b>Tous</b>
</label>
<input type='checkbox' name='CheckBoxMarqueur' id='CheckMarqueur' onclick='boxclick(this, 1)' checked/>
<img src='http://labs.google.com/ridefinder/images/mm_20_green.png' alt='http://labs.google.com/ridefinder/images/mm_20_green.png' />
<label for='Marqueur 1' >
Marqueur 1
</label>
<input type='checkbox' name='CheckBoxMarqueur' id='CheckMarqueur' onclick='boxclick(this, 2)' checked/>
<img src='http://labs.google.com/ridefinder/images/mm_20_black.png' alt='http://labs.google.com/ridefinder/images/mm_20_black.png' />
<label for='Marqueur 2' >
Marqueur 2
</label>
<input type='checkbox' name='CheckBoxMarqueur' id='CheckMarqueur' onclick='boxclick(this, 3)' checked/>
<img src='http://labs.google.com/ridefinder/images/mm_20_red.png' alt='http://labs.google.com/ridefinder/images/mm_20_red.png' />
<label for='Marqueur 3' >
Marqueur 3
</label>
<input type='checkbox' name='CheckBoxMarqueur' id='CheckMarqueur' onclick='boxclick(this, 4)' checked/>
<img src='http://labs.google.com/ridefinder/images/mm_20_blue.png' alt='http://labs.google.com/ridefinder/images/mm_20_blue.png' />
<label for='Marqueur 4' >
Marqueur 4
</label>
<input type='checkbox' name='CheckBoxMarqueur' id='CheckMarqueur' onclick='boxclick(this, 5)' checked/>
<img src='http://labs.google.com/ridefinder/images/mm_20_yellow.png' alt='http://labs.google.com/ridefinder/images/mm_20_yellow.png' />
<label for='Marqueur 5' >
Marqueur 5
</label>
<input type='checkbox' name='CheckBoxMarqueur' id='CheckMarqueur' onclick='boxclick(this, 6)' checked/>
<img src='http://labs.google.com/ridefinder/images/mm_20_purple.png' alt='http://labs.google.com/ridefinder/images/mm_20_purple.png' />
<label for='Marqueur 6' >
Marqueur 6
</label>
<input type='checkbox' name='CheckBoxMarqueur' id='CheckMarqueur' onclick='boxclick(this, 7)' checked/>
<img src='http://labs.google.com/ridefinder/images/mm_20_brown.png' alt='http://labs.google.com/ridefinder/images/mm_20_brown.png' />
<label for='Marqueur 7' >
Marqueur 7
</label>
<input type='checkbox' name='CheckBoxMarqueur' id='CheckMarqueur' onclick='boxclick(this, 8)' checked/>
<img src='http://labs.google.com/ridefinder/images/mm_20_orange.png' alt='http://labs.google.com/ridefinder/images/mm_20_orange.png' />
<label for='Marqueur 8' >
Marqueur 8
</label>
</form>
<br/>
<div id='map' class='map' style='width:80%; height:75%' >
</div>
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
<p>n'oubliez pas que vous pouvez definir un fichier css......pour personnaliser vos checkbox ou les label ou le titre <img src='http://orquo.free.fr/wink3.gif' alt=';)' /></p>
</body>
</html>
fichiers carte.js:
/***************************************************************************************************
*****************************To define all option, please go on:************************************
****************************************************************************************************
**********http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html**********
****************************************************************************************************
******************************Autor: Florent Cardot (Varfendell)************************************
****************************************************************************************************/
var carte; //declaration de la carte
var bounds; //limite de la carte en fonciton des marqueurs
var marker = []; //tableau contenant tout les marqueurs
var info = []; //tableau contenant toute les info windows
var nbMarker = [];
var tabCoord;
var curentInfoWindows;
/*************************************************************************************/
/*****************************Following code initialize the all***************************/
/*************************************************************************************/
function InitTab(i)
{
for (var a = 1; a <= i; a++)
{
info[a] = new Array();
marker[a] = new Array();
nbMarker[a] = 0;
}
curentInfoWindows = new google.maps.InfoWindow(
{
content: ""
});
}
/*************************************************************************************/
/*****************************Following code define the map***************************/
/*************************************************************************************/
function Carte (
optZoom,
Lattitude,
Longitude,
optMapTypeId
)
{
var optCenterMap = new google.maps.LatLng(Lattitude, Longitude);
var mapType = google.maps.MapTypeId[optMapTypeId];
var options =
{
center: optCenterMap, //LatLng(lat:number, lng:number) obligatoire
mapTypeId: mapType, //HYBRID, ROADMAP, SATELLITE, TERRAIN obligatoire
zoom: optZoom //number obligatoire
};
carte = new google.maps.Map(document.getElementById("map"), options);
carte.scaleControl = true ;
bounds = new google.maps.LatLngBounds();
}
/*************************************************************************************/
/**************************Following code define markers******************************/
/*************************************************************************************/
Carte.prototype.addMarker = function (
Window,
Nom,
Image,
Latitude,
Longitude,
i,
j,
bool
)
{
nbMarker[i] = j;
info[i][j] = new google.maps.InfoWindow(
{
content: Window
});
var optCenterMarker = new google.maps.LatLng(Latitude, Longitude);
bounds.extend(optCenterMarker);
marker[i][j] = new google.maps.Marker(
{
position : optCenterMarker,
title : Nom,
icon : Image,
visible: bool,
map : carte
});
google.maps.event.addListener(marker[i][j], 'click', function()
{
curentInfoWindows.close();
curentInfoWindows = info[i][j];
info[i][j].open(carte, marker[i][j]);
});
carte.fitBounds(bounds);
};
/*************************************************************************************/
/****************************Following code define checkbox***************************/
/*************************************************************************************/
function boxclick(box, i)
{
if (box.checked)
{
for (var a = 1; a <= nbMarker[i]; a++)
{
marker[i][a].setVisible(true);
}
} else
{
for (var a = 1; a <= nbMarker[i]; a++)
{
marker[i][a].setVisible(false);
}
}
};
function AllBoxClick(box)
{
var monForm = document.getElementById("checkbox");
if (box.checked)
{
for (var i = 1; i <= monForm.elements.length; i++)
{
monForm.elements[i-1].checked = true;
}
setTimeout("this.AllView(1)",1);
} else
{
for (var i = 1; i <= monForm.elements.length; i++)
{
monForm.elements[i-1].checked = false;
}
setTimeout("this.AllView(0)",1);
}
};
function AllView(box)
{
var monForm = document.getElementById("checkbox");
if (box)
{
for (var i = 1; i <= monForm.elements.length; i++)
{
for (var b = 1; b <= nbMarker[i]; b++)
{
marker[i][b].setVisible(true);
}
}
} else
{
for (var i = 1; i <= monForm.elements.length; i++)
{
for (var b = 1; b <= nbMarker[i]; b++)
{
marker[i][b].setVisible(false);
}
}
}
};

fichier carte.html:




<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr'>
	<head>
		<link rel='stylesheet' type='text/css' href='/Styles/Cartes.css'>
		<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
		<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script>
		<script type='text/javascript' src='carte.js'></script>
	</head>
	<body>
	<h1>Exemple de map Google Map API V3</h1>
		<script>
			window.onload = function() {
				InitTab(8);
				var maCarte = new Carte(10, 48, 2, 'ROADMAP');
				maCarte.addMarker('<b>marqueur 1/1</b>', 'LAUNAY_LE_CELLIER', 'http://labs.google.com/ridefinder/images/mm_20_green.png', 47.338693626997, -1.3848059582871, 1, 1, true);
				maCarte.addMarker('<b>marqueur 1/2</b>', 'LE_CELLIER', 'http://labs.google.com/ridefinder/images/mm_20_green.png', 47.362145084474, -1.3130200410076, 1, 2, true);
				maCarte.addMarker('<b>marqueur 1/3</b>', 'ST_NAZAIRE_PLAISANCE', 'http://labs.google.com/ridefinder/images/mm_20_green.png', 47.264707620022, -2.2320914645434, 1, 3, true);
				maCarte.addMarker('<b>marqueur 1/4</b>', 'BOUGUENAIS', 'http://labs.google.com/ridefinder/images/mm_20_green.png', 47.17611945074, -1.6152838327546, 1, 4, true);
				maCarte.addMarker('<b>marqueur 1/5</b>', 'NANTES_MASSILLON', 'http://labs.google.com/ridefinder/images/mm_20_green.png', 47.210858046639, -1.5645826134606, 1, 5, true);
				maCarte.addMarker('<b>marqueur 2/1</b>', 'LA_PLATROUAIS_N137', 'http://labs.google.com/ridefinder/images/mm_20_black.png', 47.537208654814, -1.6381349341563, 2, 1, true);
				maCarte.addMarker('<b>marqueur 2/2</b>', 'NANTES_BATIGNOLLES', 'http://labs.google.com/ridefinder/images/mm_20_black.png', 47.248020390746, -1.5254983603493, 2, 2, true);
				maCarte.addMarker('<b>marqueur 2/3</b>', 'LE_MARILLAIS_TGV', 'http://labs.google.com/ridefinder/images/mm_20_black.png', 47.374762594645, -1.0980928587849, 2, 3, true);
				maCarte.addMarker('<b>marqueur 2/4</b>', 'ORVAULT_BOURG', 'http://labs.google.com/ridefinder/images/mm_20_black.png', 47.270512332113, -1.6097966151195, 2, 4, true);
				maCarte.addMarker('<b>marqueur 2/5</b>', 'LE_TEMPLE', 'http://labs.google.com/ridefinder/images/mm_20_black.png', 47.323663191204, -1.7787986998103, 2, 5, true);
				maCarte.addMarker('<b>marqueur 3/1</b>', 'GUENROUET_BOURG', 'http://labs.google.com/ridefinder/images/mm_20_red.png', 47.51416895697, -1.9600557836218, 3, 1, true);
				maCarte.addMarker('<b>marqueur 3/2</b>', 'NANTES_CITE_DU_VERGER', 'http://labs.google.com/ridefinder/images/mm_20_red.png', 47.223565606577, -1.5295897840249, 3, 2, true);
				maCarte.addMarker('<b>marqueur 3/3</b>', 'ST_MARS_LA_JAILLE', 'http://labs.google.com/ridefinder/images/mm_20_red.png', 47.533915569758, -1.195044973351, 3, 3, true);
				maCarte.addMarker('<b>marqueur 3/4</b>', 'HERIC', 'http://labs.google.com/ridefinder/images/mm_20_red.png', 47.413381425284, -1.6540326281592, 3, 4, true);
				maCarte.addMarker('<b>marqueur 3/5</b>', 'VIEILLEVIGNE_BOURG', 'http://labs.google.com/ridefinder/images/mm_20_red.png', 46.970639548311, -1.4322204370362, 3, 5, true);
				maCarte.addMarker('<b>marqueur 4/1</b>', 'ST_NICOLAS_DE_REDON_TDF', 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 47.644316387417, -2.0542722844844, 4, 1, true);
				maCarte.addMarker('<b>marqueur 4/2</b>', 'JOUE_SUR_ERDRE', 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 47.508672693704, -1.3958137084406, 4, 2, true);
				maCarte.addMarker('<b>marqueur 4/3</b>', 'ST_PERE_GUERCHE', 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 47.219165463614, -2.1326262770197, 4, 3, true);
				maCarte.addMarker('<b>marqueur 4/4</b>', 'ST_BREVIN_FH', 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 47.243520881517, -2.1627237872372, 4, 4, true);
				maCarte.addMarker('<b>marqueur 4/5</b>', 'NANTES_RD_PT_DE_VANNES', 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 47.228752391061, -1.582705389684, 4, 5, true);
				maCarte.addMarker('<b>marqueur 5/1</b>', 'ARTHON_EN_RETZ_TDF', 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', 47.184866467292, -1.9679042847802, 5, 1, true);
				maCarte.addMarker('<b>marqueur 5/2</b>', 'ANCENIS_A11', 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', 47.396615201816, -1.2117455385434, 5, 2, true);
				maCarte.addMarker('<b>marqueur 5/3</b>', 'REMOUILLE', 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', 47.040920330151, -1.4150862706168, 5, 3, true);
				maCarte.addMarker('<b>marqueur 5/4</b>', 'LE_POULIGUEN', 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', 47.281962900418, -2.4239972972879, 5, 4, true);
				maCarte.addMarker('<b>marqueur 5/5</b>', 'NANTES_BEAUJOIRE', 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', 47.255929045429, -1.5257388243715, 5, 5, true);
				maCarte.addMarker('<b>marqueur 6/1</b>', 'PIRIAC_GRINGOIRE', 'http://labs.google.com/ridefinder/images/mm_20_purple.png', 47.377483492644, -2.5468204272214, 6, 1, true);
				maCarte.addMarker('<b>marqueur 6/2</b>', 'CHATEAUBRIANT_FERRIERE', 'http://labs.google.com/ridefinder/images/mm_20_purple.png', 47.704511212689, -1.3885769656162, 6, 2, true);
				maCarte.addMarker('<b>marqueur 6/3</b>', 'ST_PERE_EN_RETZ', 'http://labs.google.com/ridefinder/images/mm_20_purple.png', 47.19443346943, -2.0491392312973, 6, 3, true);
				maCarte.addMarker('<b>marqueur 6/4</b>', 'PAIMBOEUF', 'http://labs.google.com/ridefinder/images/mm_20_purple.png', 47.286914911868, -2.0371079577192, 6, 4, true);
				maCarte.addMarker('<b>marqueur 6/5</b>', 'LIGNE', 'http://labs.google.com/ridefinder/images/mm_20_purple.png', 47.412643812558, -1.3598541016581, 6, 5, true);
				maCarte.addMarker('<b>marqueur 7/1</b>', 'NANTES_BASSE_ILE', 'http://labs.google.com/ridefinder/images/mm_20_brown.png', 47.190557874099, -1.5828558523935, 7, 1, true);
				maCarte.addMarker('<b>marqueur 7/2</b>', 'LA_HAIE_FOUASSIERE', 'http://labs.google.com/ridefinder/images/mm_20_brown.png', 47.153122864915, -1.386439458749, 7, 2, true);
				maCarte.addMarker('<b>marqueur 7/3</b>', 'ST_MOLF', 'http://labs.google.com/ridefinder/images/mm_20_brown.png', 47.389443311289, -2.4192893452327, 7, 3, true);
				maCarte.addMarker('<b>marqueur 7/4</b>', 'NANTES_MOULIN_NEUF', 'http://labs.google.com/ridefinder/images/mm_20_brown.png', 47.275988528108, -1.5495520815886, 7, 4, true);
				maCarte.addMarker('<b>marqueur 7/5</b>', 'NANTES_AERO_INDOOR', 'http://labs.google.com/ridefinder/images/mm_20_brown.png', 47.157570539755, -1.6019655612934, 7, 5, true);
				maCarte.addMarker('<b>marqueur 8/1</b>', 'NANTES_MANUFACTURE', 'http://labs.google.com/ridefinder/images/mm_20_orange.png', 47.219348311025, -1.5331450552771, 8, 1, true);
				maCarte.addMarker('<b>marqueur 8/2</b>', 'LES_SORINIERES', 'http://labs.google.com/ridefinder/images/mm_20_orange.png', 47.157502861563, -1.5375905801371, 8, 2, true);
				maCarte.addMarker('<b>marqueur 8/3</b>', 'NANTES_GESVRES', 'http://labs.google.com/ridefinder/images/mm_20_orange.png', 47.26856796831, -1.5655387228665, 8, 3, true);
				maCarte.addMarker('<b>marqueur 8/4</b>', 'PORNICHET_TDF', 'http://labs.google.com/ridefinder/images/mm_20_orange.png', 47.265150271078, -2.3020472959939, 8, 4, true);
				maCarte.addMarker('<b>marqueur 8/5</b>', 'LA_MONTAGNE', 'http://labs.google.com/ridefinder/images/mm_20_orange.png', 47.190039327944, -1.6841589894496, 8, 5, true);
				}
		</script>
		<form id = 'checkbox' name = 'checkbox'>
			<input type='checkbox' name= 'All' id='checkAll' onclick='AllBoxClick(this)' checked/>
				<label id = 'selectAll' for='selectAll' class='selectAll'>
					<b>Tous</b>
				</label>
			<input type='checkbox' name='CheckBoxMarqueur' id='CheckMarqueur' onclick='boxclick(this, 1)' checked/>
			<img src='http://labs.google.com/ridefinder/images/mm_20_green.png' alt='http://labs.google.com/ridefinder/images/mm_20_green.png' />
						<label for='Marqueur 1' >
							Marqueur 1
						</label>
			<input type='checkbox' name='CheckBoxMarqueur' id='CheckMarqueur' onclick='boxclick(this, 2)' checked/>
			<img src='http://labs.google.com/ridefinder/images/mm_20_black.png' alt='http://labs.google.com/ridefinder/images/mm_20_black.png' />
						<label for='Marqueur 2' >
							Marqueur 2
						</label>
			<input type='checkbox' name='CheckBoxMarqueur' id='CheckMarqueur' onclick='boxclick(this, 3)' checked/>
			<img src='http://labs.google.com/ridefinder/images/mm_20_red.png' alt='http://labs.google.com/ridefinder/images/mm_20_red.png' />
						<label for='Marqueur 3' >
							Marqueur 3
						</label>
			<input type='checkbox' name='CheckBoxMarqueur' id='CheckMarqueur' onclick='boxclick(this, 4)' checked/>
			<img src='http://labs.google.com/ridefinder/images/mm_20_blue.png' alt='http://labs.google.com/ridefinder/images/mm_20_blue.png' />
						<label for='Marqueur 4' >
							Marqueur 4
						</label>
			<input type='checkbox' name='CheckBoxMarqueur' id='CheckMarqueur' onclick='boxclick(this, 5)' checked/>
			<img src='http://labs.google.com/ridefinder/images/mm_20_yellow.png' alt='http://labs.google.com/ridefinder/images/mm_20_yellow.png' />
						<label for='Marqueur 5' >
							Marqueur 5
						</label>
			<input type='checkbox' name='CheckBoxMarqueur' id='CheckMarqueur' onclick='boxclick(this, 6)' checked/>
			<img src='http://labs.google.com/ridefinder/images/mm_20_purple.png' alt='http://labs.google.com/ridefinder/images/mm_20_purple.png' />
						<label for='Marqueur 6' >
							Marqueur 6
						</label>
			<input type='checkbox' name='CheckBoxMarqueur' id='CheckMarqueur' onclick='boxclick(this, 7)' checked/>
			<img src='http://labs.google.com/ridefinder/images/mm_20_brown.png' alt='http://labs.google.com/ridefinder/images/mm_20_brown.png' />
						<label for='Marqueur 7' >
							Marqueur 7
						</label>
			<input type='checkbox' name='CheckBoxMarqueur' id='CheckMarqueur' onclick='boxclick(this, 8)' checked/>
			<img src='http://labs.google.com/ridefinder/images/mm_20_orange.png' alt='http://labs.google.com/ridefinder/images/mm_20_orange.png' />
						<label for='Marqueur 8' >
							Marqueur 8
						</label>
		</form>
		<br/>
		<div id='map' class='map' style='width:80%; height:75%' >
		</div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
		<p>n'oubliez pas que vous pouvez definir un fichier css......pour personnaliser vos checkbox ou les label ou le titre <img src='http://orquo.free.fr/wink3.gif' alt=';)' /></p>
	</body>
</html>





fichiers carte.js:




/***************************************************************************************************
*****************************To define all option, please go on:************************************
****************************************************************************************************
**********http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html**********
****************************************************************************************************
******************************Autor: Florent Cardot (Varfendell)************************************
****************************************************************************************************/

var carte;	//declaration de la carte
var bounds;	//limite de la carte en fonciton des marqueurs
var marker = []; //tableau contenant tout les marqueurs
var info = []; //tableau contenant toute les info windows
var nbMarker = [];
var tabCoord;
var curentInfoWindows;

/*************************************************************************************/
/*****************************Following code initialize the all***************************/
/*************************************************************************************/

function InitTab(i)
{
	for (var a = 1; a <= i; a++)
	{
		info[a] = new Array();
		marker[a] = new Array();
		nbMarker[a] = 0;
	}
	curentInfoWindows = new google.maps.InfoWindow(
			{
				content: ""
			});
}

/*************************************************************************************/
/*****************************Following code define the map***************************/
/*************************************************************************************/

function Carte	(
					optZoom,
					Lattitude,
					Longitude,
					optMapTypeId
				)
{
	var optCenterMap = new google.maps.LatLng(Lattitude, Longitude);
	var mapType = google.maps.MapTypeId[optMapTypeId];
	var options =
		{
			center: 				optCenterMap, 		//LatLng(lat:number, lng:number) 		obligatoire
			mapTypeId: 				mapType,			//HYBRID, ROADMAP, SATELLITE, TERRAIN 	obligatoire
			zoom: 					optZoom				//number 								obligatoire
		};
	carte = new google.maps.Map(document.getElementById("map"), options);
	carte.scaleControl = true ;
	bounds = new google.maps.LatLngBounds();
}

/*************************************************************************************/
/**************************Following code define markers******************************/
/*************************************************************************************/

Carte.prototype.addMarker = function 	(
											Window,
											Nom,
											Image,
											Latitude,
											Longitude,
											i,
											j,
											bool
										)
{

	nbMarker[i] = j;
	info[i][j] = new google.maps.InfoWindow(
	{
		content: Window
	});
	var optCenterMarker = new google.maps.LatLng(Latitude, Longitude);
	bounds.extend(optCenterMarker);
	marker[i][j] = new google.maps.Marker(
	{
		position : 	optCenterMarker,
		title : 	Nom,
		icon : 		Image,
		visible:	bool,
		map : 		carte
	});
	google.maps.event.addListener(marker[i][j], 'click', function()
	{
		curentInfoWindows.close();
		curentInfoWindows = info[i][j];
		info[i][j].open(carte, marker[i][j]);
	});
	carte.fitBounds(bounds);
};

/*************************************************************************************/
/****************************Following code define checkbox***************************/
/*************************************************************************************/


function boxclick(box, i)
{
	if (box.checked)
	{
		for (var a = 1; a <= nbMarker[i]; a++)
		{
			marker[i][a].setVisible(true);
		}
	} else
	{
		for (var a = 1; a <= nbMarker[i]; a++)
		{
			marker[i][a].setVisible(false);
		}
	}
};

function AllBoxClick(box)
{
	var monForm = document.getElementById("checkbox");
	if (box.checked)
	{
		for (var i = 1; i <= monForm.elements.length; i++)
		{
			monForm.elements[i-1].checked = true;
		}
		setTimeout("this.AllView(1)",1);
	} else
	{
		for (var i = 1; i <= monForm.elements.length; i++)
		{
			monForm.elements[i-1].checked = false;
		}
		setTimeout("this.AllView(0)",1);
	}
};

function AllView(box)
{
	var monForm = document.getElementById("checkbox");
	if (box)
	{
		for (var i = 1; i <= monForm.elements.length; i++)
		{
			for (var b = 1; b <= nbMarker[i]; b++)
			{
				marker[i][b].setVisible(true);
			}
		}
	} else
	{
		for (var i = 1; i <= monForm.elements.length; i++)
		{
			for (var b = 1; b <= nbMarker[i]; b++)
			{
				marker[i][b].setVisible(false);
			}
		}
	}
};

Conclusion

Source fonctionnel en local, vous pouvez la tester directement

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

carte.html 10 931 octets
carte.js 4 766 octets

Télécharger le zip

Historique

03 septembre 2010 11:02:07 :: on été rajouté: - l'ouverture d'une infowindows entrainera la fermeture de la précédente - une checkbox pour tout cocher/tout décocher - plus de type de marqueur pour les test - l'échelle an bas de la carte - une option pour choisir d'afficher ou non un marqueur lors de la génération de la carte.

Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator

CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm

SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp

TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator

ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol

Toutes les sources de la catégorie Trucs & Astuces

Sources en rapport avec celle ci

FORMULAIRE TABLEAU par vic511

SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp

RÉCEPTION DE SMS EN JAVASCRIPT par hhoareau

TROUVER UN ITINÉRAIRE AVEC GOOGLE MAP par amrounix

GESTIONNAIRE DE CONTACTS LOCALISÉS SUR UNE CARTE GOOGLE MAP par nacedo57400

Commentaires et avis

Commentaire de varfendell le 27/08/2010 12:45:22

Pour l'utilisation il suffit de télécharger les deux fichiers carte.html et carte.js dans un même dossier, et de lancer carte.html avec un navigateur (internet explorer/firefox/...)
Après on peux éditer, avec notepad++ par exemple, le fichier carte.html pour rentrer ses propres valeurs, modifier certaines chose, en ajouter ou en enlever.

Commentaire de artan le 29/08/2010 22:07:42

Bonjour,

Débutant, je vous remerci, je cherche un code semblable depuis un moment.
je vient d'éssayer en local, cela marche parfaitement. bien que je ne comprenne pas encore bien tous les parametres, mais je ne desepere pas.
par contre je suis interessé par la version PHP/MYSQL afin d'utiliser des marqueurs encore plus flexible.

Commentaire de varfendell le 29/08/2010 22:27:14

Bonjour,

En faite la "version" php mysql se contente de récupérer les informations dans une base de données et de les insérer dans le code... ainsi cette version sera unique à chaque base de données. Je vais retravailler cette version dans la semaine à venir pour la rendre compréhensible et que vous n'ayez plus qu'a mettre vos propre informations.Par contre elle ne sera donc pas fonctionnel en local directement, il faudra changer certaines chose pour l'adapter.

Commentaire de maxredphenix le 27/09/2010 19:36:03

Bonjour,

Vous marquez qu'il est fonctionnel en local mais est-il possible de l'utiliser hors ligne avec un carte perso (une image html de 9000pixels par 7000pixel)?????

Sinon très très beau boulot

Commentaire de varfendell le 27/09/2010 20:24:53

Bonsoir,

La connexion a internet est nécessaire car on a besoin d'accéder au script de google map. En revanche les icone elles peuvent être remplacer par des images locale de votre ordinateur. Mais la génération de la carte ce fait grâce a un script...alors a moins que vous ne le téléchargiez:

http://maps.google.com/maps/api/js?sensor=true

mais je ne sais pas s'il y a une arborescence après.

Commentaire de PiM69 le 22/11/2010 18:31:53

Super dévellopement, simplee à mettre en place...
merci beaucoup

Commentaire de wafikov le 06/12/2010 16:24:50

Bonjour, j'ai testé le programme il fonctionne très bien Mais à partir du mois Novembre 2010 il me donne erreur script :
Détails de l'erreur de la page Web

Message : 'google' est indéfini.
Ligne : 29
Caractère : 2
Code : 0
URI : file:///C:/Documents%20and%20Settings/wafik/Bureau/carte.js

Help me!

Commentaire de varfendell le 06/12/2010 17:59:20

Bonsoir Wafikov,

J'ai testé le script sur mon PC ce soir, et il fonctionne très bien.
Ton problème pourrait être dû à certain élément que je ne connait pas:
- le choix de ton navigateur, ta connexion internet, et le paramétrage de ton navigateur. Par exemple, sous IE, tu peut activer le débogage JS qui t'ouvrira une pop up a la moindre erreur au lieu de passer outre et afficher ce qu'il peut, donc si tu n'as pas internet, il t'affichera effectivement ce genre d'erreur.

- Tu as modifié un peu le code pour l'adapter a ta manière. Ainsi s'il manque cette ligne par exemple:
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script>
ton genre d'erreur sera afficher.

Je te conseil donc de reprendre exactement mon code dans les deux fichier, et de refaire tes modification une à une dans le cas de la seconde possibilité.

Commentaire de wafikov le 20/12/2010 12:06:54

Bonjour VARFENDELL,
Je vous remercie beaucoup pour votre réponse et votre aide vraiment je te remercie mille fois.
pour mon pb j'ai testé les même fichier que tu as partagé (carte;html et carte.js) sur IE 6, IE 7, IE 8, Firefox, Chrome ça marche pas. j'ai tester la connexion via plusieurs adsl et dans différents endroits et à partir de plusieurs postes ça marche pas.
Après l'ctivation du débogage JS il me donne :google est indéfini
curentInfoWindows = new google.maps.InfoWindow(
{
content: ""
});

je vous remerie encore une fois

Commentaire de aquel33 le 23/12/2010 19:46:19

bonjour
j'essaie de faire un site qui affiche une carte avec des marqueurs à cocher. les fichiers joints fonctionnent bien
mais j'aimerais pouvoir récupérer les informations de chaque marqueur à partir d'un fichier xml (comme ici avec la V2 de google api : http://google-maps-api-version-2.touraineverte.com/aide-documentation-exemple-tutoriel-didacticiel/controle/cases-a-cocher/marqueurs-markers/list-liste-selection-categorie.htm) ou bien en php/sql
merci d'avance

Commentaire de iks2 le 07/01/2011 21:08:55

Bonjour, super script!
Comment fait-on maintenant si on souhaite mettre toutes les infos des marqueurs dans un fichier data.xml?

Commentaire de wafikov le 11/01/2011 14:36:08

Bonjour,
Je vous remercie pour ce très bon travail ainsi que pour votre aide. maintenant mon problème est résolu en changeant dans: <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script>. j'ai remplacer google.com par google.fr ça marche très bien mais avec goog.com ça bloque!!!
Je vous souhaite bon courrage et bravo encore une nouvelle fois

Commentaire de arta le 17/01/2011 07:21:30

Bonjour tous
Pour suivre pour le php/sql ;)

Commentaire de Rem5962 le 20/01/2011 19:25:46 10/10

Exactement ce que je cherchais pour mettre à jour de la V2 à la V3. Merci
http://chti.sportif.free.fr/cartecalendar.php

A voir si j'arrive à l'adapter pour une base mysql...

Commentaire de val45du58 le 13/05/2011 23:48:48 5/10

Bonjour,
Je suis en train de réaliser un site pour des amis marocains, et moi qui ne comprends rien à javascript, je suis très content d'être tombé sur cette excellent script.
Lié à une base de données on peut faire beaucoup de chose avec, bref c'est génial !!
Cependant, vu que je n'entends rien au javascript, je bloque sur un truc. Quelqu'un pourrait peut-être me renseigner !? Y a-t-il un moyen simple de spécifier un zoom minimum à la carte !?
Pour ceux que ce là intéresseraient : http://www.matourroco.com/cible/cartes.php?region=Haut%20Atlas
Vous pourrez y constater pourquoi je cherche à donner un minimum à la carte. Certaines cartes non qu'un marqueur et le Zoom est au maximum.

Commentaire de val45du58 le 14/05/2011 00:02:30

Excuse moi pour la note !!! Ce n'est pas du tout celle-ci que je souhaitais donner !! Ça vaut *****

Commentaire de varfendell le 14/05/2011 01:47:03

Salut,

Pour le zoom, si mes souvenir sont bon, il est initialisé lors de la création de la carte, en paramètre. Ainsi ligne 19 tu as ceci:
var maCarte = new Carte(10, 48, 2, 'ROADMAP');
Remplace 10 par un autre chiffre. Le chiffre 10 represente en effet le zoom de base à afficher.

Commentaire de val45du58 le 14/05/2011 11:20:45

Merci pour ta réponse rapide,
J'ai déjà essayé cette solution, mais elle modifie la carte que lorsque qu'aucun marker ne figure sur la carte !!!
J'ai, d'ailleurs, déjà modifié ces coordonnées. (Pour le constater sur mes cartes, il suffit de virer tous ce qui ce trouve après le « ? » dans la barre d'adresse)
En faite c'est le Bounds qu'il faudrait arriver à modifier, mais mes connaissances en javascript sont trop limitées pour bien comprendre comment il agit sur la carte. De plus, on est là, avec un codage qui est propre à cette application !
Ce qu'il faudrait pour mes cartes, qui n'ont qu'un marquer, c'est pouvoir leurs spécifier un zoom en modifiant le bounds.
J'imagine que vous n'avez pas que cela à faire !! J'espère, seulement, que quelqu'un finira par me renseigner.
Merci de ton aide.
Cordialement.

Commentaire de varfendell le 15/05/2011 11:39:47

Effectivement. Pour le problème du bounds, je redéfini dans le code les limite de la carte à l'ajout de chaque marqueur. Donc le zoom n'agit pas.

Pour remedier à cela, il suffit de mettre en commentaire la dernière ligne de la méthode addMarqueur carte.fitBounds(bounds); en ajoutant un // devant: //carte.fitBounds(bounds);

(ligne 225 sur cette page)

Commentaire de val45du58 le 17/05/2011 10:21:24

Ok, merci de ta réponse !!
Je rentre de weekend, je n'ai pas eu le temps de tester. Mais, après m'être arraché les cheveux avec ce problème, je vois bien ce que cela va me permette de faire. De toute évidence, je vais pouvoir ajouter un zoom à certain de mes markers et leur redéfinir un centre et un zoom en agissant sur la ligne 19 du code !!!
Je ferais des tests ce soir... Et te tiendrait au courant du résultat.
Re MERCI

Commentaire de val45du58 le 23/05/2011 10:24:29

Je n'ai pas eu le temps l'autre soir!
Il suffit, effectivement, de mettre en commentaire la ligne 225 comme ceci : //carte.fitBounds(bounds); et de modifier via une base de données la ligne 19.
On peut, ainsi, redéfinir le zoom et le centrage de la carte.
Re Merci pour ton aide.
Le lien ou l'on peut voir le résultat pour ceux que cela intéresse : http://www.matourroco.com/
PS : Super code qui offre plein de possibilités !!!!

Commentaire de Damakelyrado le 05/12/2011 09:52:23

bonjours,Je vous remercie pour ce code,ça m'a beaucoup aider,Juste que maintenant je cherche y ajouter une fonction qui permet de faire une recherche d'un lieu,est il possible de réaliser cela!merci d'avance!

Commentaire de phineau17 le 11/02/2012 00:33:25 10/10

super script qui fonctionne vraiment très bien.

J'ai essayé d'appliquer ce script en affichant mes marqueurs en provenance d'une base de données mysql mais j'avoue ne pas y être arriver.
J'ai inséré ma connexion mysql et fait ma requete pour extraire les marqueurs que je souhaite en vert par exemple.
En fait je n'arrive pas à construire ma boucle car il affiche seulement la carte avec mon premier marqueur.
Si quelqu'un à une piste pour me permettre d'y arriver je suis preneur.

voila la boucle que j'ai écrit (ne m'engueulez pas je sais je ne suis pas un pro de la programmation)
en gros j'ai remplacé la ligne 20 par :
do {
maCarte.addMarker('<b>marqueur 1/1</b>', '<?php echo $row_Recordset1['nom']; ?>', 'http://labs.google.com/ridefinder/images/mm_20_green.png', <?php echo $row_Recordset1['latitude']; ?>, <?php echo $row_Recordset1['longitude']; ?>, 1, 1, true);
} while ($row_Recordset1 = mysql_fetch_assoc($Recordset1));

qui qui peut m'aider gentillement ?

Commentaire de varfendell le 11/02/2012 22:14:15

Salut,

Merci pour ta note :)

Pour ton problème, d'après ce que j'ai compris, l'initialisation des marqueurs (parie JS de la page HTML) ne fonctionne pas.
Je ne me souviens plus exactement comment j'avais fait, mais je me souviens du principe:

Il te faut un tableau de trois dimensions. La première dimension contient le type de marqueurs, la seconde dimension contient le numéro du marqueur et la troisième dimension contient les info du marqueur.

Ainsi par exemple, tu auras pour la première ligne, les élément suivant du tableau:
tab[0][0][info]=<b>marqueur 1/1</b>
tab[0][0][lieu]=LAUNAY_LE_CELLIER
tab[0][0][image]=http://labs.google.com/ridefinder/images/mm_20_green.png
tab[0][0][lat]=47.338693626997
tab[0][0][lon]=-1.3848059582871

La première dimension est le type du marqueur (ici par exemple la couleur verte, mais sa peut etre pour les marqueur de type hôtel, ou zone a risque) et la seconde dimension contiendra le numéro de se marqueur (si tu as 80 marqueurs hôtel, tu aura ton tableau tab[0][0][...]; tab[0][1][...]; ... ; tab[0][80][...]

Donc normalement il faut faire une triple boucle:

for (i=0; i<tab.lenght; i++){ //boucle sur les type de marqueur, dans mon exemple de couleur on a 8 type de marqueurs
       for(j=0; j<tab[i].lenght;j++){ //boucle sur tout les marqueurs du type i, dans mon exemple de couleur 5 par marqueurs, mais peut être différent selon i
                 for(k=0; k<tab[i][j].lenght;k++){ //boucle sur toute les info (infobulle, nom, lat, lon, image marqueur...)
                              echo 'la ligne du marqueur avec les info de la 3eme dimension';
                 }
         }
}

Voila, sa devait être un truc du genre. J'espère ne pas t'embrouiller, MP moi si tu vois toujours pas.

Commentaire de lcomb le 02/03/2012 09:07:46

Bonjour,bravo pour ce script,je l'ai essayé ,il marche bien,
1.Maintenant je veux le modifié pour (c'est pas bien prévu pour je pense)
garder juste 1 seul maCarte.addMarker ,donc un seul point (pas de problème) sauf que du coup il faudrait dezoomer la carte chose
que je n arrive pas à faire avec le code (c est un peu normal c'est pas bien fais pour!)Retoucher le carte.js ?
2.et aussi que veux dire la ligne var maCarte = new Carte(10, 48, 2, 'ROADMAP');
Encore bravo pour ce script
Merci de vos réponses !

Commentaire de varfendell le 02/03/2012 10:05:48

Salut,

Pour le zoom, si mes souvenirs sont bons, il est initialisé lors de la création de la carte, en paramètre. Ainsi ligne 19 tu as ceci:
var maCarte = new Carte(10, 48, 2, 'ROADMAP');
Remplace 10 par un autre chiffre. Le chiffre 10 représente en effet le zoom de base à afficher.

Cependant, le zoom de la carte se redéfinit automatiquement si il y a deux marqueurs ou plus. Pour enlever cette option, il suffit de mettre en commentaire la dernière ligne de la méthode addMarqueur carte.fitBounds(bounds); en ajoutant un // devant: //carte.fitBounds(bounds);

(ligne 225 sur cette page)

Pour ta seconde question, var maCarte = new Carte(10, 48, 2, 'ROADMAP'); correspond à l'initialisation de la carte. 10 correspond au zoom, 48 et 2 correspondent à la latitude et la longitude (approximativement celle de la France) mais sont, de la même manière que le zoom, redéfinit si il y a un marqueur ou plus. Et enfin ROADMAP correspond au type de map (tu peux avoir HYBRID, ROADMAP, SATELLITE ou TERRAIN)

J'espère que cela répondra à tes questions.

N'hésite pas à noter ;)

Commentaire de Mlsouc le 18/03/2012 19:48:01

Bonjour

Un grand merci pour votre exellent travail qui m'a permis de réaliser ma carte.
Mais j'aurais aimé y apporter un plus, colorer des zones (les quartiers d'une ville) y a t'il la possibilité d'y intégrer un fichier kml que j'ai déjà et comment ?

Merci de vos réponses

Commentaire de varfendell le 18/03/2012 20:51:37

Salut, alors je sais que c'est possible, mais je n'ai jamais travaillé sur cette option, donc je ne peut pas t'aider, dsl

Commentaire de Mlsouc le 18/03/2012 21:10:01

Merci pour ta réponse, ce n'est pas grave, je ferais sans car la carte déjà avec les coches c'est super pour moi, si des fois je trouvais la solution je reviendrai pour partager.

Merci encore pour tout.

Commentaire de Mlsouc le 21/03/2012 15:54:14 10/10

Je croyais avoir mis la note mais apparemment ça n'a pas marché, je la remets.

Pas trouvé pour le kml, je l'utilise sur une autre carte qui est faite avec un autre code mais je n'ai pas réussi à l'intégrer à celle-ci tant pi je m'en passerai.
Mais pour tout le reste c'est super , j'ai fait les modifs selon mes besoin et j'ai bien avancé.
Re merci

Commentaire de Mlsouc le 23/03/2012 22:10:53

Bonsoir
Mon problème est réglé, je n'ai pas réussi à y joindre un fichier kml mais j'ai mis mes polygones dans le fichier js et ça marche impécable, tout baigne.
@ +

Commentaire de hantouva le 06/05/2012 14:53:41

bonjour
super tutoriel je viens de tester j'aimerais juste modifier au lieu de donner des latitudes et longitudes entrer des adresses postales est ce que c'est possible a obtenir avec ce tuto pourriez vous m'aidez svp j'ai essaye pas mal de code mais aucun n'a aboutit

Commentaire de hantouva le 06/05/2012 16:08:41

re bonjour,
voila je viens de trouver la fonction suivante pour ajouter des adresses postales au lieu des coordonnées géographique, j'ai essaye de remplacer mais ça na rien donner une idée svp?

<?php $map->addMarkerByAddress( "<addresse_postale>", "<titre de l'infobulle>", "<em>contenu</em> de l'infobulle", "<Title du pointeur>"); ?>

Commentaire de hantouva le 07/05/2012 10:38:42

bonjour,
peut on remplacer les longitudes et latitudes par une adresse postale directement dans ce code?
merci pour votre aide

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

probleme de markers avec l'API google MAP [ par PorcoRosso ] bonjour , voila je charge tout mes markers avec l'API google map et XML tout se passe bien j'ai bien tout les points sur la carte mais quand je clique probleme de markers avec l'API google MAP [ par PorcoRosso ] bonjour , voila je charge tout mes markers avec l'API google map et XML tout se passe bien j'ai bien tout les points sur la carte mais quand je clique Formulaire html D'Ajout de marker Google Map API [ par deter ] Salut, Je souhaite réaliser un formulaire d'ajout de marqueur sur une carte Google map api comme le formulaire de Google local Itineraire google map [ par bibo06 ] Salut à tous, J'ai récupérer un script sur le site http://www.itineraire-google-maps.com/ pour avoir un itineraire google map sur mon site.Voulant fa [CS]google earth api/ javascript [ par math11 ] Bonjour, Ayant déjà posté des questions a propos de google earth api (javascript), j'ai été étonné de ne pas trouver de thème pour mes questions, mêm Google Earth api (javascript) [ par math11 ] Salut, j'ai une liste de liens (pays) et j'aimerais que lorsque je clique sur l'un d'eux, il me change le look de l'icône du marker. J'ai réussi sans Google map API - plusieurs icones sur la carte [ par familledac ] Bonjour, Je viens de mettre en place une carte de mes clients sur mon site (google map API) J'aimerais proposer diverses icones en fonction du type de Utilisation API Google maps en local avec carte perso [ par maxredphenix ] Bonjour a tous, Je souhaite utiliser l'api google maps pour mon travail (a moins qu'il y en a d'autre). En effet je voudrais utiliser cette API en "l [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 google map [ par walidmahjoub ] faire un code java script qui permet de savoir si un marqueur est dans la zone dans une carte gmap!!

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

RE : CODE BUG JAVASCRIPT par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

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