Bien débuter avec Google Maps API V3

Accueil > Blog > Development > Bien débuter avec Google Maps API V3

1.    Introduction

Dans ce tutorial, nous allons parler de Google Maps API V3 qui est une nouvelle version de l’API Maps.

Nous allons voir ici comment débuter avec la nouvelle API Googlemaps V3. Rappelons que l’ancienne version nécessitait une clé pour fonctionner et que celle-ci était valable uniquement pour un seul nom de domaine. Tout au long du tutoriel, nous montrerons comment initialiser une carte, comment placer un point sur une carte, comment créer une info-bulle sur le point placé sur la carte, comment créer une tabulation dans une info-bulle.

A la fin nous obtiendrons une carte Google avec dessus, le point que nous aurons placé identifié par un marqueur et une info-bulle lorsque nous cliquerons sur ledit marqueur.

2.    Initialisation de la carte

Nous n’allons pas parler ni du html, ni du javascript qui constitue les prérequis utiles pour la compréhension de ce tutorial.

Pas de configurations particulières à faire ici pour démarrer.

L’API Google Maps JavaScript version 3 nous permet de créer, modifier et personnaliser des cartes géographiques à l’aide de la classe google.maps.Map. Plusieurs types de cartes existent :

Grâce aux caractéristiques de l’objet google.maps.MapOptions nous pouvons définir les propriétés d’une carte selon vos besoins : centrer la carte, définir le type de carte, activer ou désactiver le contrôle panoramique, etc.

Ces cartes sont interactives. Nous pouvons zoomer ou les déplacer à volonté. Il est également possible d’ajouter des observateurs d’évènements afin de faire réagir la carte à divers évènements.

Enfin, différents types d’informations peuvent venir s’afficher sur la carte Google, comme par exemple :

Pour commencer, partons d’une structure de base html comme ci-dessous ;

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Google Maps Api v3</title>
  </head>
  <style type="text/css">
    #container{position:relative;width:990px;margin:auto;}
    #container #map{width:500px;height:500px;margin:auto;}
  </style>
  <body>
    <div id="container">
        <div id="map">
            <p>Veuillez patienter pendant le chargement de la carte...</p>
        </div>
    </div> 
    <!-- Include Javascript -->
    <script type="text/javascript" src="<a href="http://maps.google.com/maps/api/js?sensor=false">http://maps.google.com/maps/api/js?sensor=false</a>"></script>
    <script type="text/javascript" src="/js/functions.js"></script>
  </body>
</html>
 

Quelques explications sur la structure :

La div portant l’identifiant map sera le conteneur de notre carte ; le message présent dans cette div sera donc effacé lorsque la carte sera chargée.

Nous incluons l’Api Googlemap et un fichier appelé functions.js dans lequel nous allons initialiser notre carte.

Voici notre functions.js

var map;
var initialize;
initialize = function(){
  var latLng = new google.maps.LatLng(50.6371834, 3.063017400000035); // Correspond au coordonnées de Lille
  var myOptions = {
    zoom      : 14,
    center    : latLng,
    mapTypeId : google.maps.MapTypeId.TERRAIN, // Type de carte, différentes valeurs possible HYBRID, ROADMAP, SATELLITE, TERRAIN
    maxZoom   : 20
  }; 
  map = new google.maps.Map(document.getElementById('map'), myOptions);
}; 
initialize();
 

3.    Placer un point sur la carte

Nous venons donc d’initialiser notre carte sur Lille, simple n’est-ce pas ?

Maintenant peut-être souhaitez-vous placer un point sur cette carte ? Et bien voici comment faire :

var marker = new google.maps.Marker({
    position : latLng,
    map      : map,
    title    : "Lille"
    //icon     : "marker_lille.gif"
});
 

Il faut impérativement créer le marqueur après l’initialisation de la carte pour préciser au marqueur la carte sur laquelle il doit s’afficher. Voir l’exemple ci-dessous :

initialize = function(){
  var latLng = new google.maps.LatLng(50.6371834, 3.063017400000035); // Correspond au coordonnées de Lille
  var myOptions = {
    zoom      : 14, // Zoom par défaut
    center    : latLng, // Coordonnées de départ de la carte de type latLng
    mapTypeId : google.maps.MapTypeId.TERRAIN, // Type de carte, différentes valeurs possible HYBRID, ROADMAP, SATELLITE, TERRAIN
    maxZoom   : 20
  };

  map  = new google.maps.Map(document.getElementById('map'), myOptions);
  var marker = new google.maps.Marker({
    position : latLng,
    map      : map,
    title    : "Lille"
    //icon     : "marker_lille.gif" // Chemin de l'image du marqueur pour surcharger celui par défaut
  });
};
 

4.    Créer une info-bulle

Vous voilà maintenant avec votre carte et votre premier point, vous remarquerez que rien ne se passe lorsque vous cliquez sur le point, voici comment afficher une info-bulle :

var contentMarker = ‘Suspendisse quis magna dapibus orci porta varius sed sit amet purus. Ut eu justo dictum elit malesuada facilisis. Proin ipsum ligula, feugiat sed faucibus a, http://www.google.fr“>google sit amet mauris.’

 
var infoWindow = new google.maps.InfoWindow({
    content  : contentMarker,
    position : latLng
});
 

Nous venons de définir l’info-bulle et son contenu, il ne reste plus qu’à définir un listener :

google.maps.event.addListener(marker, 'click', function() {
    infoWindow.open(map,marker);
});
 

Et le tour est joué !

5.    Créer une tabulation dans une info-bulle

Auparavant, avec l’Api v2 Googlemaps, il était possible d’obtenir des tabulations dans les info-bulles, dorénavant cela n’est plus possible, l’une des solutions consiste à créer la tabulation soit-même en javascript. Je vous propose donc de passer par jQuery où toute autre librairie de votre choix pour la réalisation de la tabulation. Pour ma part, je choisis Jquery. Voici un exemple ci-dessous.

var contentString = [
          '<div id="containerTabs">',
          '<div id="tabs">',
          '<ul>',
            '<li><a href="#tab-1"><span>Lorem</span></a></li>',
            '<li><a href="#tab-2"><span>Ipsum</span></a></li>',
            '<li><a href="#tab-3"><span>Dolor</span></a></li>',
          '</ul>',
          '<div id="tab-1">',
            '<h3>Lille</h3><p>Suspendisse quis magna dapibus orci porta varius sed sit amet purus. Ut eu justo dictum elit malesuada facilisis. Proin ipsum ligula, feugiat sed faucibus a, <a href="<a href="http://www.google.fr/">http://www.google.fr</a>">google</a> sit amet mauris. In sit amet nisi mauris. Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan.</p>',
          '</div>',
          '<div id="tab-2">',
           '<h3>Aliquam vestibulum</h3><p>Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan.</p>',
          '</div>',
          '<div id="tab-3">',
            '<h3>Pretium suscipit</h3><ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li><li>Amectus</li></ul>',
          '</div>',
          '</div>',
          '</div>'
        ].join('');

google.maps.event.addListener(infoWindow, 'domready', function(){ // infoWindow est biensûr notre info-bulle
    jQuery("#tabs").tabs();
});
 

Il faudra biensûr ne pas oublier de télécharger et d’inclure jQuery Ui disponible ici http://jqueryui.com/download

Voici le résultat visuel ;

Vous pouvez intégrer ce code si vous souhaitez avoir deux points sur la carte :

var marker1;
 var marker2;

var latLngMarker1 = new google.maps.LatLng(’50.62925′,’3.057256000000052′);
 var latLngMarker2 = new google.maps.LatLng(’50.6283955′,’3.0520400000000336′);

var contentStringMarker1 = ‘Lille’;
 var contentStringMarker2 = ‘rue Léon Gambetta Lille’;

var infoWindowMarker1 = new google.maps.InfoWindow({
 content : contentStringMarker1,
 position : latLngMarker1
 });
 var infoWindowMarker2 = new google.maps.InfoWindow({
 content : contentStringMarker2,
 position : latLngMarker2
 });

google.maps.event.addListener(marker1, \’click\’, function() {
 infoWindowMarker1.open(map,marker1);
 });
 google.maps.event.addListener(marker2, \’click\’, function() {
 infoWindowMarker2.open(map,marker2);
 });

6.    Références

Référence    i : https://developers.google.com/maps/documentation/javascript/tutorial?hl=fr
Référence ii : http://www.touraineverte.com/google-maps-api-version-3/exemple-tutoriel-cartes-maps/index.html

7.    Conclusion

Pour résumer, nous avons sommairement montré comment débuter avec Googlemaps API V3 et cela à travers un exemple pas à pas dans lequel nous avons placé un point, créé une info-bulle, créé une tabulation dans l’info-bulle ; il est à signaler aussi qu’Au-delà du 19 mai 2013 les cartes codées via l’API Google Maps JavaScript version 2 ne s’afficheront plus.

L’Api Google map V3 ne requiert plus de clé d’authentification pour son utilisation. Il suffit de faire appel à l’api de cette façon:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>

L’instanciation des classes a également changé :

<script type="text/javascript">
//  Ancienne version (V2) :
var marker = new GMarker(point);

//  Nouvelle version (V3) :
var marker = new google.maps.Marker({position: point};

//  Le G précédant le nom de la classe est remplacé par google.maps.
//  On constate également une différence de la forme du paramètre passé à la classe.
</script>
Bien débuter avec Google Maps API V3 par Cet article a 20265 Commentaire(s) 1.    Introduction Dans ce tutorial, nous allons parler de Google Maps API V3 qui est une nouvelle version de l’API Maps. Nous allons voir ici comment débuter avec la nouvelle API Googlemaps V3. Rappelons que l’ancienne version nécessitait une clé pour fonctionner et que celle-ci était v

20,265 commentaires

  • Gerardo says:

    I do some voluntary work buy baclofen online If the assault on ISIS doesn’t have that feel by November, most folks will do what they usually do by voting their pocketbooks and rendering a judgment on the incumbent.
    endep 50mg There is more to be seen on what immigration control with fair rules looks like when we consider citizenship, but Labour’s promise is a step in the right direction if fairness is a guide
    what is lisinopril According to the Duke survey, vendors spend roughly $211 million on construction and setup annually

Donnez votre avis !

Combien font plus ?