Google Maps, marqueur, bulle info, déplacement
Dans ce tutoriel, nous allons pousser nos connaissances dans l’Api Google Maps.
Nous allons voir comment mettre en place des marqueurs, des bulles info et des déplacements sur les cartes.
Vous allez voir c’est très simple. 
Préparation
On va reprendre l’affichage d’une simple carte (celle du tutoriel précédent)
Je vous rappelle le code source :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- source:www.waanser.com -->
<!-- auteur:roul -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Jardin des Tuileries</title>
<script src="http://maps.google.com/maps?file=api;key=ABQIAAAAzg_ZseRgldxWcy2tNYAEYRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSS7F5U7RNXncIf02uklkFtcG80gw" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var map;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(48.86175,2.331119), 15);
map.setUIToDefault();
}
}
</script>
<div id="map" style="width: 500px; height: 300px"></div>
<script type="text/javascript">
window.onload = function(){initialize()};
</script>
</body>
</html>
Marqueur
Pour mettre en place des marqueurs, il faut juste donner les coordonnées.
Là, on est en terrain connu, on va créer un point géographique.
Dans cet exemple, on va mettre un point sur la pyramide du Louvre.
var point = new GLatLng(48.860800,2.335800);
Et là, on a plus qu’à mettre le marqueur :
map.addOverlay(new GMarker(point));
Facile, non ?
Bulle info
Maintenant que l’on sait mettre des marqueurs, nous allons voir comment mettre des bulles info dans nos cartes.
C’est avec la commande map.openInfoWindow que nous allons afficher une bulle info avec le message “Demain, rdv ici !”
Voici la syntaxe :
map.openInfoWindow(point géographique,nœud de texte)
Et Voici le code source :
map.openInfoWindow(new GLatLng(48.860800,2.335800),
document.createTextNode("Demain, rdv ici !"));
Déplacement
Pour finir, nous allons voir comment nous déplacer dans une carte.
C’est la commande panTo qui va nous permettre de centrer l’utilisateur sur un lieu défini.
Il prend en paramètre un point géographique (un objet GLatLng).
Voici un ensemble d’utilisation, on va centrer la carte sur la place concorde à Paris :
function animate() {
map.panTo(new GLatLng(48.865731,2.32378));
}
Pour appliquer cet exemple, nous allons créer un bouton.
A l’instant même de cliquer sur ce bouton, le script va se lancer automatiquement.
(Ce qui va normalement centrer la carte sur la place concorde )
<form> <p> <input type="button" value="Au concorde !" onclick="animate();" /> </p> </form>
Eh voilà, le résultat :
Maintenant que vous êtes des As de google map, je vous laisse faire des merveilles avec l’api de google.
(3 votes, moyenne: 4,33 max : 5)
Loading ...
Note de l'article