Logo TouraineVerte

GMap3 Plugin JQuery

addBicyclingLayer gmap3

Google Maps API & Google Web Services

Vous avez trouvé ce tutoriel intéressant ? Recommandez le en cliquant sur le bouton +1    

Ajouter la couche piste cyclable sur une carte Google Maps

Tutoriel publié le Mis à jour le
Tutoriel en Français

Cette fonction permet d'ajouter la couche piste cyclable sur une carte Google Maps

addBicyclingLayer

La carte est déjà initialisée, donc l'appel peut être simplifié

$('#maCarte').gmap3('addBicyclingLayer');

Carte avec addBicyclingLayer : Exemple I

Code complet avec addBicyclingLayer : Exemple I

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8"/>
		<title>Votre titre de page</title>
		<style type="text/css">
			html { height: 100% }
			body { height: 100%; margin: 0px; padding: 0px }
			#maCarte { height: 350px; width: 100%; }
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
		<script type="text/javascript"> 
			$(function(){
				$('#maCarte').gmap3('addBicyclingLayer');
			});
		</script>
	</head>
	
	<body>
		<div id="maCarte"></div>
	</body>
</html>

La même chose (simplifiée) dans une liste d'actions

$('#maCarte').gmap3(
	{ 
		action: 'init', 
		mapTypeId : google.maps.MapTypeId.ROADMAP, 
		center:[42.3726399,-71.1096528], 
		zoom: 14
	},
	'addBicyclingLayer'
);

Carte avec addBicyclingLayer : Exemple II

Code complet avec addBicyclingLayer : Exemple II

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8"/>
		<title>Votre titre de page</title>
		<style type="text/css">
			html { height: 100% }
			body { height: 100%; margin: 0px; padding: 0px }
			#maCarte { height: 350px; width: 100%; }
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
		<script type="text/javascript"> 
			$(function(){
				$('#maCarte').gmap3(
					{ 
						action: 'init', 
						mapTypeId : google.maps.MapTypeId.ROADMAP, 
						center:[42.3726399,-71.1096528], 
						zoom: 14
					},
					'addBicyclingLayer'
				);
			});
		</script>
	</head>
	
	<body>
		<div id="maCarte"></div>
	</body>
</html>

La même chose (non simplifiée) dans une liste d'actions

$('#maCarte').gmap3(
	{ 
		action: 'init', 
		mapTypeId : google.maps.MapTypeId.ROADMAP, 
		center:[42.3726399,-71.1096528], 
		zoom: 14
	},
	{
		action: 'addBicyclingLayer'
	}
);

Carte avec addBicyclingLayer : Exemple III

Code complet avec addBicyclingLayer : Exemple III

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8"/>
		<title>Votre titre de page</title>
		<style type="text/css">
			html { height: 100% }
			body { height: 100%; margin: 0px; padding: 0px }
			#maCarte { height: 350px; width: 100%; }
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
		<script type="text/javascript"> 
			$(function(){
				$('#maCarte').gmap3(
					{ 
						action: 'init', 
						mapTypeId : google.maps.MapTypeId.ROADMAP, 
						center:[42.3726399,-71.1096528], 
						zoom: 14
					},
					{
						action: 'addBicyclingLayer'
					}
				);
			});
		</script>
	</head>
	
	<body>
		<div id="maCarte"></div>
	</body>
</html>

 

Source

addBicyclingLayer

Résumé

GMap3 Plugin JQuery : addBicyclingLayer gmap3

addBicyclingLayer gmap3