Logo TouraineVerte

API Google Maps JavaScript version 3

Migration v2 vers v3 pour créer marqueur et info-bulle

Google Maps API & Google Web Services

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

Migration du code javascript Google Maps V2 vers V3 pour créer un marqueur et une infobulle simples

Tutoriel publié le Mis à jour le

Migrer le code javascript pour créer un marqueur de la V2 vers la V3

Voici un exemple de migration de code de l'API Google Maps JavaScript Version 2 vers la version 3.

Ce code vous permet de créer un marqueur au-dessus duquel s'ouvre automatiquement une info-bulle (ou infowindow) contenant le texte "J'adore Tours"

Caractéristiques de la carte :

  • centrée sur la ville de Tours (Latitude : 47.390251 et Longitude : 0.68882),
  • type : ROADMAP,
  • niveau de zoom : 13.

Caractéristiques du marqueur :

  • attaché : à la carte nommée 'maCarte',
  • position : centre de la carte nommée 'maCarte',
  • aspect : par défaut (goutte d'eau rouge inversée).

Caractéristiques de l'infobulle :

  • liée au marqueur nommée 'marqueur',
  • état : ouverte par défaut,
  • contenu : 'J'adore Tours'.

Carte Google

Code : API Google Maps JavaScript Version 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Titre de votre page</title>
		<style type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
		<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAATndsWAV5Q2y7pRRi-22W_hTxw9fvAnrsiYejTsRxd4b0cj9HKxSNCXUxAANaoACDzXWznNLVPto_jA&sensor=false" type="text/javascript"></script>
		<script type="text/javascript">
			function initialisation() {
				if (GBrowserIsCompatible()) {
					var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
					maCarte.setCenter(new GLatLng(47.390251,0.688877), 13);
					maCarte.setUIToDefault();
					var marqueur = new GMarker(maCarte.getCenter());
					maCarte.addOverlay(marqueur);
					maCarte.openInfoWindowHtml(maCarte.getCenter(),"J'adore Tours");
				}else{
					alert("Désolé, votre navigateur n'est pas compatible avec l'API Google Maps JavaScript Version 2");
				}
			}
		</script>
	</head>

	<body onload="initialisation()" onunload="GUnload()">
		<div id="EmplacementDeMaCarte"></div>
	</body>
</html>

Code : API Google Maps JavaScript Version 3 - 1er exemple

<!DOCTYPE HTML>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<meta charset="UTF-8" />
		<title>Google Maps JavaScript API V3 Exemple : Ajouter un marqueur</title>
		<style type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>

		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation() {
				var optionsCarte = {
					zoom: 13,
					center: new google.maps.LatLng(47.390251,0.688877),
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsMarqueur = {
					position: maCarte.getCenter(),
					map: maCarte
				}
				var marqueur = new google.maps.Marker(optionsMarqueur);
				var optionsInfoBulle = {
					content: "J'adore Tours"
				}
				var infoBulle = new google.maps.InfoWindow(optionsInfoBulle);
				infoBulle.open(maCarte, marqueur);
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>

	<body>
		<div id="EmplacementDeMaCarte"></div>
	</body>
</html>

Code : API Google Maps JavaScript Version 3 - 2ème exemple

<!DOCTYPE HTML>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<meta charset="UTF-8" />
		<title>Google Maps JavaScript API V3 Exemple : Ajouter un marqueur</title>
		<style type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation() {
				var optionsCarte = {
					zoom: 13,
					center: new google.maps.LatLng(47.390251,0.688877),
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var marqueur = new google.maps.Marker();
				marqueur.setPosition(maCarte.getCenter());
				marqueur.setMap(maCarte);
				var infoBulle = new google.maps.InfoWindow();
				infoBulle.setContent("J'adore Tours");
				infoBulle.open(maCarte, marqueur);
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>

	<body>
		<div id="EmplacementDeMaCarte"></div>
	</body>
</html>