Logo TouraineVerte

API Google Maps JavaScript version 3

Migration du code de la V2 vers la V3 pour créer une carte

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 la V3 pour créer une simple carte

Tutoriel publié le
Tutoriel en Français

Migrer le code javascript pour créer une carte 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 une simple carte, ayant les caractéristiques suivantes :

  • centre : Tours ( Latitude : 47.390251 et Longitude : 0.68882 ),
  • niveau de zoom : 13,
  • contrôles : par défaut,
  • type initial de carte : plan.

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: 0px; padding: 0px }
			#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.68882), 13);
					maCarte.setUIToDefault();
				}else{
					alert("Désolé, votre navigateur n\'est pas compatible avec l\'API Google Maps JavaScript Version 2");
				}
			}
		</script>
	</head>

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

Code : API Google Maps JavaScript Version 3

<!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: Carte simple</title>
		<style type="text/css">
			html { height: 100% }
			body { height: 100%; margin: 0px; padding: 0px }
			#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.68882),
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>

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