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.
- Code pour créer un marqueur avec l'API Google Maps Javascript Version 2
- Code pour créer un marqueur avec l'API Google Maps Javascript Version 3 - Exemple 1
- Code pour créer un marqueur avec l'API Google Maps Javascript Version 3 - Exemple 2
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>