18. Introduction à l'API v3

Ecrit par fabien le 5/06/2009.

| |

Sommaire

Introduction
Initialisation
Construction de l'objet 'map'
Corps de la page HTML
Code complet
Démonstration
Remarques
Conclusion

Introduction

La nouvelle API de Google Maps est sensiblement identique à la version 2. Pour les développeurs connaissant l'API v2, ce ne devrait pas être trop déroutant, juste un peu plus simple et logique - selon moi.

Initialisation

Afin de garantir l'utilisation de la carte sur tous les supports Internet, il est nécessaire de définir dans les méta que la carte sera affichée pleine page et que l'utilisateur ne pourra pas modifier la taille de cette dernière.

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

L'appel à l'API se fait maintenant sans avoir besoin de clé - quel est le devenir de l'API Google Maps Premier ?

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

Ici nous ne travaillerons pas à le 'sensor' de l'utilisateur.

Construction de l'objet 'map'

Une des nouveautés de cette API est le fait qu'il faille initialiser les paramètres de position et de zoom du centre, et les paramètres de type de couche avant de construire l'objet carte, dans un souci de performance, ces options seront des objets 'non construits' et donc littéraux :

    var latlng = new google.maps.LatLng(48.856667, 2.350987);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

Et enfin nous initialisons la carte avec le nouveau appel typique à cette nouvelle version : google.maps à la place de GMaps2 :

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

Corps de la page HTML

Toujours dans le souci d'affichage sur les mobiles nouvelle génération, nous définissons la taille de la carte sur tout l'espace disponible du navigateur.

<body style="margin:0px; padding:0px;" onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>

Code complet

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(48.856667, 2.350987);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Démonstration

Résultat pleine page

Remarques

La documentation de l'API v3 se trouve cette à cette adresse : http://code.google.com/intl/fr/apis/maps/documentation/v3/

Conclusion

Bien qu'encore à l'état bêta, il est tout à fait possible de créer une simple carte - sans se soucier des contrôles - accessible rapidement par les ordinateurs de bureau et les smartphones 3G.
Le reste des fonctions et services disponibles sur la version 2 de l'API seront progressivement adaptés sur la version 3.
Nous les essayerons au fur et à mesure de leur sortie.

Auteur : Fabien - fabien.goblet [ at ] gmail.com

Retour en haut

Bonjour, Vos tutoriaux me

Par Stephanie (non vérifié), le ven, 21/10/2011 - 10:01am.

Bonjour,
Vos tutoriaux me sont vraiment très utiles, merci beaucoup.
J'ai une question dont je n'arrive pas à trouver la réponse clairement.
J'entends beaucoup dire que Google Maps n'est pas open source. Cela signifie-t-il qu'on ne peut pas avoir accès au code et le modifier à sa guise ? Est-il possible de télécharger Google Maps API pour l'avoir sur son ordinateur comme il est possible avec OpenLayers, ExtJS etc... ? Ou alors est-on à la merci de se voir supprimer l'accès à l'API à tout moment (comme il est déjà possible de se voir ajouter de la publicité à tout moment)?
Merci d'avance
Stephanie

répondre

Bonjour, Google Maps n'est

Par fabien, le sam, 22/10/2011 - 9:31am.

Bonjour,
Google Maps n'est pas opensource. On ne peut pas 'rapatrier' le code sur son ordi. Ca reste néanmoins une chouette bibliothèque - mais on peut avoir de la pub à tout moment, on peut voir son accès supprimé, bref on n'a pas la 'main' dessus.
Fabien

répondre

Bonjour, Merci pour ce tuto

Par Emile (non vérifié), le jeu, 25/08/2011 - 5:00pm.

Bonjour,
Merci pour ce tuto qui rend accessible la mise en oeuvre de GoogleMaps sur son site.
L'exemple donné fonctionne parfaitement.

répondre

J'ai fait la même chose mais

Par Anonymous (non vérifié), le dim, 16/01/2011 - 1:08am.

J'ai fait la même chose mais cela ne fonctionne pas sur mon site! Peut être ne prend il pas en compte le Java? Je sais plus quoi faire! Tu aurais une idée?
Merci...

répondre

Bonjour, il n'y a pas besoin

Par fabien, le dim, 16/01/2011 - 11:22am.

Bonjour,
il n'y a pas besoin d'avoir Java pour afficher une page Google Maps.
Normalement, ce simple code fonctionne parfaitement.
Sans plus d'infos, je ne sais où vous aiguiller : peut-être demander des informations sur ce forum : http://www.forumsig.org/forumdisplay.php?f=54

répondre

Merci pour le code, je

Par Paul (non vérifié), le mer, 15/12/2010 - 10:53am.

Merci pour le code, je cherche une solution pour en afficher 2 plans avec chacun ses coordonnées lat.long sur la même page, une idée?

répondre

Bonjour, il suffit de définir

Par fabien, le mer, 15/12/2010 - 1:27pm.

Bonjour,
il suffit de définir deux div dans le corps HTML :

<div id="map_canvas1"></div>
<div id="map_canvas2"></div>

puis dans la fonction initialize() de définir deux cartes, chacune s'affichant dans un div :

function initialize(){
 var options1 = {
  ... les options de la carte n°1
 }
 var map1 = new google.maps.Map(document.getElementById('map_canvas1'), options1);
 var options2 = {
  ... les options de la carte n°2
 }
 var map2 = new google.maps.Map(document.getElementById('map_canvas2'), options2);
}

et enfin définir les tailles des div dans le css :

#map1{
 height: ___px;
 widht: ___px;
}
#map2{
 height: ___px;
 width: ___px;
}

Fabien

répondre

Bonjour, Merci pour votre

Par Lise, Montréal (non vérifié), le dim, 10/04/2011 - 6:19pm.

Bonjour,
Merci pour votre 'code'. J'en ai essayé de nombreux et c'est seulement le vôtre qui fonctionne parfaitement du premier coup. Je suis en 'localhost' et je n'ai eu aucun problème d'afficher la carte du lieu de l'OSBL suite à la page modifiée pour y inclure une mapGoogle. Il me reste à trouver la balise pour un marqueur à l'endroit précis :)

Un gros merci et passez une belle journée,
Lise

répondre

Bonjour, merci de votre

Par fabien, le dim, 10/04/2011 - 6:58pm.

Bonjour,
merci de votre soutien, ce sont ces commentaires qui nous font continuer.
Pour afficher un marqueur, le tuto ad-hoc devrait faire l'affaire : http://www.geotribu.net/node/204

Fabien

répondre