Google Maps, Javascript

[Tuto] Bien débuter avec Google Maps API V3

J’ai décidé de créer ce billet pour aider certains d’entre vous à utiliser la nouvelle API Googlemaps V3.
Rappelons que l’ancienne version de l’Api nécessitait une clef pour fonctionner et cette clé était valable uniquement pour un nom de domaine, ce n’est plus le cas aujourd’hui.

Initialisation de la carte

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

    Google Maps Api v3</pre>
<div id="container">
<div id="map">

Veuillez patienter pendant le chargement de la carte...</div>
</div>
<pre>


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

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 fichier function.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();

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
  });
};

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, <a href="http://www.google.fr">google</a> 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é !

Créer une tabulation dans une info-bulle

Auparavant, avec l’Api v2 de Googlemaps, il était possible d’obtenir des tabulations dans les info-bulles, dorénavant celà n’est plus possible, l’une des solutions possibles 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 = [
          '</pre>
<div id="containerTabs">', '
<div id="tabs">', '
<ul>', '
 	<li><a href="#tab-1">Lorem</a></li>
', '
 	<li><a href="#tab-2">Ipsum</a></li>
', '
 	<li><a href="#tab-3">Dolor</a></li>
', '</ul>
', '
<div id="tab-1">', '
<h3>Lille</h3>
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="http://www.google.fr">google</a> sit amet mauris. In sit amet nisi mauris. Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan. ', '</div>
', '
<div id="tab-2">', '
<h3>Aliquam vestibulum</h3>
Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan. ', '</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>
<pre>
'
        ].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

Pour la démonstration c’est ici,
et ça se passe là pour les sources.

Ce billet vous a plus ? N’hésitez pas à laisser un commentaire, c’est toujours encourageant.

Previous Post Next Post

You Might Also Like

21 Comments

  • Reply Jérémie 15 juillet 2011 at 16 h 29 min

    Super intéressant ce tuto !

    Je cherche un moyen d’avoir plusieurs points accompagnés de leurs bulles sur la carte… mais du coup je galère à les déclarer dans le code…

    Aurais-tu un exemple avec 2 points sur la carte ?

    Merci

    • Reply admin 16 juillet 2011 at 12 h 05 min

      Salut Jérémie, oui voici un exemple avec deux points

      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);
      });

      Et voilà le tour est joué, idéalement tu peux imaginer une boucle PHP qui génère le code ci-dessus en remplaçant le numéro dans le nom du marqueur, latLng…etc par l’identifiant du point.

  • Reply Jérémie 18 juillet 2011 at 13 h 57 min

    Super !

    Merci beaucoup pour ta réponse ! je teste çà et je posterai le résultat final !

  • Reply YanOu 10 août 2011 at 14 h 21 min

    Whouhaaa génial ce tuto!!!
    Je pense m’en servir très prochainement… Merci shatimes :D

  • Reply itinerairesbis 14 août 2011 at 9 h 43 min

    bonjour, et merci pour ce tuto…
    Ce que je recherche, c’est d’apprendre via un tuto pour placer des adresses stockées dans ma base de données et les placer sur ma carte Google V3
    cordialement
    gilles

    • Reply admin 26 août 2011 at 13 h 54 min

      Bonjour,

      Il suffit de regarder l’exemple ci-dessus avec deux points, il faut simplement imbriqué le code dans la boucle de vos points et nommer de manière dynamique les variables.

  • Reply [Tuto] Calculer et tracer un itinéraire avec Google Maps API v3 « Shatimes 20 septembre 2011 at 14 h 36 min

    […] article est la suite logique de ce précédent billet sur la découverte de l’API Google Maps V3. Nous repartirons donc de l’archive […]

  • Reply Maroua 13 juin 2012 at 0 h 23 min

    Bonjour,
    Merci beaucoup pour ce tuto ça m’a beaucoup aidé !
    Avez vous une idée comment je pourrais localiser des tablettes à partir leurs adresses IP et afficher leurs localisation sur une carte ?

    • Reply admin 13 juillet 2012 at 11 h 41 min

      Salut,

      Tant mieux si le tuto t’aide c’est le but :-D

      Je trouve ta question très intéressante, je vais y consacrer

      un tutoriel ces prochains jours.

      A bientôt

  • Reply zecat 28 juillet 2012 at 11 h 15 min

    Bravo pour ce tuto … une vraie aide et un vrai gain de temps lorsqu’on debut sur google map …

    Par contre, plutot que lat et long, ca serait cool d’avoir le tuto pour localiser quelque chose de plus naturel : une adresse : 25, avue de la Paix, Paris, France

    Si vous avez 3 minutes de libre ;-)

  • Reply Denis 3 août 2012 at 23 h 29 min

    Bonjour,

    auriez vous un exemple de google maps Api V3 en PHP avec utilisation des marqueurs. En effet je galère à insérer des marqueurs en PHP, cela ne fonctionne pas. J’utilise du PHP car je travaille avec une base de données MySQL.
    Par avance Merci
    Denis

  • Reply thierry 1 février 2013 at 11 h 09 min

    un seul mot : BRAVO

  • Reply Amadou 27 février 2013 at 14 h 24 min

    Super le tuto. J’ai regretté d’avoir perdu mon temps a lire des tutos sur Google Map en anglais.
    Et merci aussi pour les liens

  • Reply Tibo 10 avril 2013 at 22 h 37 min

    Bonsoir,
    Tout d’abord merci, le tuto est très clair et bien expliqué.

    Par contre j’ai un problème : rien ne s’affiche.
    J’ai bien inclus le fichier js () qui se trouve dans mon dossier js ainsi que l’url google ()

    La structure de ma page est de ce type :
    le head contenant les includes JS est inclut sur la page index
    la page recherche.php (qui doit afficher la carte) est incluse sur la page index.php (le tout géré par un .htaccess pour une meilleure lisibilité dans l’url)

    J’espère avoir était assez clair… Pouvez-vous m’aider?

  • Reply Tibo 10 avril 2013 at 23 h 17 min

    Re-bonsoir,

    J’ai finalement trouver mon problème :
    1 – Ma div « map » ne possédant pas de taille, j’ai déclaré ma fonction initialize de cette façon :
    $(window).load(function(){

    }
    2 – Pour que ceci fonctionne, il faut inclure le jquery (pour ma part ) AVANT d’inclure le fichier functions.js

    Si cela peut aider quelqu’un.

  • Reply Laurent 29 avril 2013 at 15 h 05 min

    Merci pour ce tuto très pratique !

  • Reply emilie 26 mai 2013 at 17 h 40 min

    Ce tuto a l’air vraiment pas mal!
    Mais étant novice en la matière, j’ai du mal à percevoir l’enchaînement des codes, est ce que ce serait possible de pouvoir les voir.
    Ce que j’aimerais faire ce serait tout simplement d’appeler différentes images pour les markers pour différentes localisations (une carte avec les logos de chacunes des entreprises).

    Merci d’avance

  • Reply Dgé 9 janvier 2014 at 15 h 44 min

    Bonjour.

    Tout d’abord merci pour ce tuto qui m’as afin aidé à mettre un google map propre en place. C’est clair c’est simple c’est TOP.

    Juste une petite question peut on mettre en place une carte personnalisée avec l’outil google (le lien suivant) gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

    Encore merci

    • Reply admin 10 janvier 2014 at 13 h 34 min

      Salut,

      Merci pour ton retour :-)

      Oui c’est tout à fait possible de styler la carte, tu dois simplement récupérer le JSON généré par l’assistant (« stylers »: [ … ])

      Et modifier le code dans functions.js

      1) Après la déclaration de myOptions tu déclares les styles de la carte

      var styles = [ … ];

      2) Tu crées un nouvel élément de type StyledMapType

      var stylesMap = new google.maps.StyledMapType(styles, {name : ‘Styled Map’});

      3) Après avoir crée la carte (map = new google.maps.Map…) tu affectes tes styles à la carte

      map.mapTypes.set(‘map_style’, styledMap);
      map.setMapTypeId(‘map_style’);

      4) C’est terminé tu as plus qu’à observer le résultat ;-)

      Edit : Je viens de créer une page d’exemple de carte stylée comme pour les autres tutos : http://shatimes.com/googlemap/carte-stylees/

  • Reply ado 16 avril 2014 at 17 h 18 min

    Bonjour.

    Tout d’abord merci pour ce tuto qui m’aide enormement.
    j’ai un probleme je voudrai inserer un marqueur simplement avec le clic du souris pour tracer a la fin un parcour entre deux points. quelqu’un aurait une idée?
    merci d’avance

  • Reply NomZA 18 avril 2014 at 21 h 44 min

    Bonjour et merci pour votre travail.

    Je finalise mon site qui avec google map v3 et je rencontre un problème avec ma déclaratuin de variable . Je me permet de poster cet exemple pour savoir si rien vous choque car moi cela ne fonctionne pas

    var maCarte = new google.maps.Map(document.getElementById(« maCarte »), mapOptions);

    Cordialement

  • Leave a Reply