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

Ajouter un cercle ou rond sur une carte Google Maps gmap3

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

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

addCircle

  • Paramètres spécifiques : aucun
  • Nom de stockage : circle
  • Résultat du callback : google.maps.Circle
 
$('#carte').gmap3(
	{
		action: 'addCircle',
		circle:{
			options:{
				center: [37.772323, -122.214897],
				radius : 750,
				fillColor : "#FFAF9F",
				strokeColor : "#FF512F"	
			}
		},
		map:{
			center: true,
			zoom:13
		}
	},
	{
		action: 'addCircle',
		center: [37.772323, -122.214897],
		radius : 500,
		fillColor : "#F4AFFF",
		strokeColor : "#CB53DF"
	}
);

Carte avec addCircle

Code complet avec addCircle

<!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: 'addCircle',
						circle:{
							options:{
								center: [37.772323, -122.214897],
								radius : 750,
								fillColor : "#FFAF9F",
								strokeColor : "#FF512F"
							}
						},
						map:{
							center: true,
							zoom:13
						}
					},
					{
						action: 'addCircle',
						center: [37.772323, -122.214897],
						radius : 500,
						fillColor : "#F4AFFF",
						strokeColor : "#CB53DF"
					}
				);
			});
		</script>
	</head>
	
	<body>
		<div id="maCarte"></div>
	</body>
</html>

 

Source

addCircle

Résumé

GMap3 Plugin JQuery : addCircle gmap3

addCircle gmap3