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

Ajouter un marqueur sur une carte Google Maps

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

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

addMarker

  • Paramètres spécifiques :
    • Option de InfoWindow (c'est à dire l'info bulle) pour associer un objet google.maps.InfoWindow à un marqueur
  • Nom de stockage : marker
  • Résultat du Callback : google.maps.Marker
$('#maCarte').gmap3(
	{
		action: 'addMarker',
		address: "place de l'étoile, paris",
		map:{
			center: true,
			zoom: 14
		},
		marker:{
			options:{
				draggable: true
			}
		},
		infowindow:{
			options:{
				content: 'Hello World !'
			}
		}
	}
);

Carte avec addMarker

Code complet avec addMarker

<!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: 'addMarker',
						address: "place de l'étoile, paris",
						map:{
							center: true,
							zoom: 14
						},
						marker:{
							options:{
								draggable: true
							}
						},
						infowindow:{
							options:{
								content: 'Hello World !'
							}
						}
					}
				);
			});
		</script>
	</head>
	
	<body>
		<div id="maCarte"></div>
	</body>
</html>

 

Source

addMarker

Résumé

GMap3 Plugin JQuery : addMarker

addMarker