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

Ajouter des polylines sur une carte Google Maps

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

Cette fonction vous permet d'ajouter une polyline sur une carte Google Maps

addPolyline

  • Paramètres spécifiques : aucun
  • Nom de stockage : polyline
  • Résultat Callback : google.maps.Polyline
$('#maCarte').gmap3(
	{
		action: 'init', 
		center:[0, -180], 
		zoom:2, 
		mapTypeId: google.maps.MapTypeId.TERRAIN
	},
	{
		action: 'addPolyline',
		options:{
		strokeColor: "#FF0000",
		strokeOpacity: 1.0,
		strokeWeight: 2
		},
		path:[
			[37.772323, -122.214897],
			[21.291982, -157.821856],
			[-18.142599, 178.431],
			[-27.46758, 153.027892]
		] 
	}
);

Carte avec addPolyline

Code complet avec addPolyline

<!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', 
						center:[0, -180], 
						zoom:2, 
						mapTypeId: google.maps.MapTypeId.TERRAIN
					},
					{
						action: 'addPolyline',
						options:{
						strokeColor: "#FF0000",
						strokeOpacity: 1.0,
						strokeWeight: 2
						},
						path:[
							[37.772323, -122.214897],
							[21.291982, -157.821856],
							[-18.142599, 178.431],
							[-27.46758, 153.027892]
						] 
					}
				);
			});
		</script>
	</head>
	
	<body>
		<div id="maCarte"></div>
	</body>
</html>

 

Source

addPolyline

Résumé

GMap3 Plugin JQuery : addPolyline

addPolyline