Google map api v3 carte, marqueur, infowindows

Soyez le premier à donner votre avis sur cette source.

Vue 21 561 fois - Téléchargée 2 143 fois

Description

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 / Exemple :


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:

/***************************************************************************************************



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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

varfendell
Messages postés
3388
Date d'inscription
jeudi 27 décembre 2007
Statut
Membre
Dernière intervention
15 avril 2019
-
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.
cs_artan
Messages postés
6
Date d'inscription
mercredi 10 septembre 2003
Statut
Membre
Dernière intervention
20 mars 2012
-
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.
varfendell
Messages postés
3388
Date d'inscription
jeudi 27 décembre 2007
Statut
Membre
Dernière intervention
15 avril 2019
-
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.
maxredphenix
Messages postés
58
Date d'inscription
vendredi 8 septembre 2006
Statut
Membre
Dernière intervention
9 novembre 2012
-
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
varfendell
Messages postés
3388
Date d'inscription
jeudi 27 décembre 2007
Statut
Membre
Dernière intervention
15 avril 2019
-
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.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.