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

Ajouter un polygone sur une carte Google Maps

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

Cette fonction permet d'ajouter un polygone sur une carte Google Maps.

addPolygon

  • Paramètres spécifiques : aucun
  • Nom de stockage : polygon
  • Résultat du Callback : google.maps.Polygon
$('#maCarte').gmap3(
	{
		action: 'init', 
		center:[24.886436490787712,-70.2685546875], 
		zoom:3, 
		mapTypeId: google.maps.MapTypeId.TERRAIN 
	},
	{
		action: 'addPolygon',
		options:{
			strokeColor: "#FF0000",
			strokeOpacity: 0.8,
			strokeWeight: 2,
			fillColor: "#FF0000",
			fillOpacity: 0.35
		},
		paths:[
			[25.774252, -80.190262],
			[18.466465, -66.118292],
			[32.321384, -64.75737],
			[25.774252, -80.190262]
		]
	}
);

Carte avec addPolygon

Code complet avec addPolygon

<!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:[24.886436490787712,-70.2685546875], 
						zoom:3, 
						mapTypeId: google.maps.MapTypeId.TERRAIN 
					},
					{
						action: 'addPolygon',
						options:{
							strokeColor: "#FF0000",
							strokeOpacity: 0.8,
							strokeWeight: 2,
							fillColor: "#FF0000",
							fillOpacity: 0.35
						},
						paths:[
							[25.774252, -80.190262],
							[18.466465, -66.118292],
							[32.321384, -64.75737],
							[25.774252, -80.190262]
						]
					}
				);
			});
		</script>
	</head>
	
	<body>
		<div id="maCarte"></div>
	</body>
</html>

 

Source

addPolygon

Résumé

GMap3 Plugin JQuery : addPolygon

addPolygon