Google Maps, marqueur, bulle info, déplacement

Google Maps, marqueur, bulle info, déplacement

sommaire :

  1. Préparation

  2. Marqueur

  3. Bulle info

  4. 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.

Note de l'article




1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, moyenne: 4,17 max : 5)
Loading ... Loading ...

  1. Nanosoft Says:
    mai 3rd, 2010 at 15 h 38 min

    Un bon post, bourré d’info facile et rapide c’est ce qu’on appelle le professionnalisme :)
    Merci ça ma beaucoup aidé.

  2. bilelovitch Says:
    août 22nd, 2010 at 1 h 51 min

    moi je veux faire un formulaire d’où
    l’utilisateur poura se localiser tt seul
    et moi je v récupérer ces cordonner via ce formulaire là.
    merci

  3. bal Says:
    septembre 14th, 2010 at 9 h 29 min

    Cool comme tuto : simple et clair !

    Par contre, est il possible de poser un marqueur en utilisant une adresse physique en lieu et place des coordonnées latitude et longitude ???

  4. Credit maison Says:
    janvier 4th, 2011 at 15 h 31 min

    Merci pour ces infos, je suis perdu sur google map !

Donner votre avis :