11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Plusieurs cartes Google maps sur une même page

Bonjour,

Je voudrais savoir s'il est possible de mettre plusieurs cartes google maps (API v3) sur une même page. Pour l'instant je n'ai pas réussi, seule la première est prise en compte...

Et je n'oublie pas de cibler une balise spécifique pour chaque cartes
<div id="google-maps1"></div>
<div id="google-maps2"></div>

Si vous avez une piste à m'indiquer... je n'ai pas trouvé sur les tutos de google ou autre pour l'instant.
Merci MrJO, malheureusement je ne suis pas doué : je n'arrive pas à utiliser cet indice...

Mais je vais essayer de comprendre ce qu'il en est en étudiant cette page où deux cartes sont posée côte à côte...

Édit : Argh ! ce sont des iframes ! C'est peut-être ça la solution, mais ça ne me plait pas trop.
Modifié par Olivier C (26 Sep 2012 - 22:59)
En fait ça dépend ce que tu veux faire avec ta carte, c'est quoi la finalité ? Car une iframe peut très bien convenir dans certains cas.

Et si jamais t'as une démo de dispo en ligne, met nous le lien qu'on puisse regarder.
Modifié par MrJO (27 Sep 2012 - 08:02)
J'ai effectivement une démo en ligne.

Hiers, suite à notre conversation, j'ai fait l'essai de mettre la carte "Street View" par iframe. Je me dit que la carte la plus importante marchera au moins sur smartphone, en attendant de trouver mieux pour la deuxième qui est plus "gadget"...
Je pense que la version iframe est très bien pour ton besoin. C'est même plus "light" et tu n'as pas besoin d'utiliser l'api gmap.

Pour la 1ère carte moi j'aurais mis : 

<iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=fr&geocode=&q=Les+Rivets,+43160+LA+CHAISE-DIEU,+FRANCE(Saint+Jean+des+Quatre+Couronn%C3%A9s)@45.325908,3.695122&ie=UTF8&z=14&t=m&iwloc=addr&output=embed"></iframe>


Les attributs de l'iframe sont à modifier bien-sur, mais le "q" de l'url est plus intuitif et permet de mieux se repérer. (démo : http://maps.google.com...&output=embed

Car pour celle que tu as mis, impossible de tracer un itinéraire, ou simplement s'envoyer l'adresse par email/sms/gps pour y aller.
Certes, mais comme je le disais précédemment les iframes ne fonctionnent pas avec les mobiles, enfin à ce qu'il me semble (pas encore vérifié cette info : je n'ai pas de smartphone !)...
Les iframes fonctionne très bien avec les mobiles ^^.
Un mobile qui peut aller sur internet avec un navigateur digne de se nom gère les iframes. Le cas échéant, de toute façon si les iframes ne fonctionne pas, l'api javascript de gmap ne fonctionnera pas non plus Smiley cligne
EDIT de Janvier 2016 :

Des années plus tard je retombe sur cet ancien topic. À l'intention des futurs lecteurs je le déterre pour donner une réponse sur un plateau :
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      [id^="map"] {
        height: 50vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="map2"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {
            lat: -34.397,
            lng: 150.644},
          zoom: 8
        });
        map2 = new google.maps.Map(document.getElementById('map2'), {
          center: {
            lat: -34.397,
            lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <!-- Pour le dev (en local par exemple) : -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
    async defer></script>
    <!-- Avec une clef :
    <script src="https://maps.googleapis.com/maps/api/js?key=VOTRE_CLEF&callback=initMap"
    async defer></script>
    -->
  </body>
</html>

Modifié par Olivier C (08 Jan 2016 - 07:38)
Sujet clos
Aller à