Google map api v3 carte, marqueur, infowindows

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (varfendell)