Waanser » API Google Maps http://www.waanser.com Un blog utilisant WordPress Wed, 07 Jul 2010 21:54:44 +0000 en hourly 1 http://wordpress.org/?v=3.0 Google Maps, marqueur, bulle info, déplacement http://www.waanser.com/javascript/api-google-map/2262-google-maps-marqueur-bulle-info-deplacement.html http://www.waanser.com/javascript/api-google-map/2262-google-maps-marqueur-bulle-info-deplacement.html#comments Sun, 22 Nov 2009 12:27:41 +0000 roul http://www.waanser.com/?p=2262 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.

]]> http://www.waanser.com/javascript/api-google-map/2262-google-maps-marqueur-bulle-info-deplacement.html/feed 2 Les premiers pas avec l’api Google Maps http://www.waanser.com/javascript/api-google-map/2054-notre-premiere-carte-avec-lapi-google-maps.html http://www.waanser.com/javascript/api-google-map/2054-notre-premiere-carte-avec-lapi-google-maps.html#comments Wed, 20 May 2009 16:14:43 +0000 roul http://www.waanser.com/?p=2054 L’api Google Maps est certainement un des outils les plus en vogue sur la toile. Dans cet article nous allons apprendre à afficher notre toute première carte via l’api Google Maps.

Inscription

Tout d’abord il va falloir inscrire son site auprès de google sur ce site.

On peut très bien mettre comme adresse 127.0.0.1 ou localhost

api googlemap

api googlemap

Google va vous renvoyer dans une page d’administration. Il vous donnera votre clef, pour faire appel à l’api Google Maps.

Si vous avez pris comme URL localhost vous aurez cette clé : ABQIAAAAzg_ZseRgldxWcy2tNYAEYRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSS7F5U7RNXncIf02uklkFtcG80gw

La carte

Dans la partie head de notre page web nous allons charger la librairie JS de Google Maps

<script src="http://maps.google.com/maps?file=api&amp;amp;amp;amp;amp;amp;v=2&amp;amp;amp;amp;amp;amp;key= VOTRE CLE =true" type="text/javascript"></script>

Là on va créer une fonction javascript qui va charger la carte.

Voici le code, les explications sont juste en-dessous : :) 

<script type="text/javascript">
 function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(48.86175,2.331119), 15);
        map.setUIToDefault();
      }
    }
 </script>

La fonction GBrowserIsCompatible est une fonction de l’api google map qui vérifie que le navigateur est compatible avec l’api Google Maps.

Pour afficher la carte, il faut indiquer à Google Maps un point géographique et un indice de zoom.

Pour définir un point géographique nous allons utiliser l’objet GLatLng.
Voici ça syntaxe :
new GLatLng(latitude,longitude)

Enfin pour définir la carte nous allons utiliser la méthode setCenter de l’objet map
Voici ça syntaxe :
map.setCenter(objet GLatLng, indice de zoom);

La méthode setUIToDefault() sert juste à afficher les boutons de navigations sur la carte.

On à fait le plus dur, on va pouvoir afficher la carte :) 

  <body>
    <div id="map" style="width: 500px; height: 300px"></div>
   	<script type="text/javascript">
		window.onload = function(){initialize()};
	</script>
  </body>

Vous aurez reconnu le jardin des Tuileries :

Astuce pour avoir la géolocalisation

J’ai trouver une méthode vraiment facile pour récupérer les coordonnées d’un lieu voulut. (si vous avez trouvez plus simple n’hésitez pas à partager :) )

Pour cela il faut aller sur google maps, vous tapez sur le moteur le nom du lieu que vous vous voulez afficher. (on va dire bastille).

Une fois la carte bien centrée, vous cliquez sur le bouton Envoyer

api Google Maps

api Google Maps

Une fenêtre apparait et là il suffit de récupérer les bonnes informations :

api Google Maps

api Google Maps

note : si vous n’avez pas toutes les informations, il faut naviguer un tout petit peu dans la map et tout devrait s’afficher :)

Voilà c’est fini pour cet article. Dans les prochains articles nous allons voir plus en détail l’api Google Maps, notamment dans la personnalisation de la carte.

]]> http://www.waanser.com/javascript/api-google-map/2054-notre-premiere-carte-avec-lapi-google-maps.html/feed 3