IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

APIs Google Discussion :

[Article] Intégrer des cartes Google Maps avec Gmap.js


Sujet :

APIs Google

  1. #1
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    Mars 2011
    Messages
    3 179
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : Mars 2011
    Messages : 3 179
    Points : 19 374
    Points
    19 374
    Par défaut [Article] Intégrer des cartes Google Maps avec Gmap.js


    Je vous propose une traduction de l'article anglophone Create Google Maps With Gmap.js par Paul Underwood : Créer des cartes Google Maps avec Gmap.js.

    N'hésitez pas à faire part de vos remarques, commentaires ou propositions d'améliorations !

    Créer des cartes Google Maps avec Gmap.js.

    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  2. #2
    Candidat au Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2013
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Janvier 2013
    Messages : 1
    Points : 2
    Points
    2
    Par défaut Et l'adresse postale ?
    J'aurai aimé voir un exemple sur l'utilisation d'adresse postale
    que ce soit sur pour le positionnement de la carte, l'ajout des marqueur ou autres ...

  3. #3
    Responsable Perl et Outils

    Avatar de djibril
    Homme Profil pro
    Inscrit en
    Avril 2004
    Messages
    19 818
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 19 818
    Points : 499 183
    Points
    499 183
    Par défaut
    MErci pour cette article intéressant.
    Il faudrait quand même préciser que les exemples sont incomplets car il faut rajouter dans la div class="map" et que la classe en question soit bien définie dans son CSS. Voir l'exemple du CSS.

  4. #4
    Membre du Club
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    110
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 110
    Points : 57
    Points
    57
    Par défaut
    Très bon article!

    Tout semble assez simple à mettre en place et malgré tout, j'ai un souci... rien ne s'affiche!

    J'ai tout relu, recontrôler les nom des fichiers et div au cas où et pourtant toujours rien n'apparait dans mon div.

    Est-ce que cela pourrait venir du fait que je sois pour en local?

    Merci d'avance.

  5. #5
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    Mars 2011
    Messages
    3 179
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : Mars 2011
    Messages : 3 179
    Points : 19 374
    Points
    19 374
    Par défaut
    Comme l'a dit djibril il te faut une CSS de base minimum pour que les divs s'affichent.
    Si tu ne précises pas de CSS, comme tes divs sont vides, elles ne s'affichent pas et tu ne vois donc pas les cartes

    Tu peux prendre le CSS utilisé dans la démo pour tester
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  6. #6
    Membre du Club
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    110
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 110
    Points : 57
    Points
    57
    Par défaut
    Merci FirePrawn, j'avais déclarer l'id mais pas la class.

    La carte s'affiche bien par contre j'ai une remarque, j'ai voulu ajouter un marker (mon but final est de pouvoir générer l'affichage de carte depuis les données d'une BDD), le résultat affiche bien le conteneur de la taille de la carte mais celle ci ne s'affiche pas.

    J'ai ajouté ce code dans le JS (avec #basic_map, puisque je ne n'ai pas modifier mon HTML et CSS ):
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    $(document).ready(function(){
     var map = new GMaps({
        el: '#basic_map',
        lat: 51.5073346,
        lng: -0.1276831,
        zoom: 13,
        zoomControl : true,
        zoomControlOpt: {
            style : 'SMALL',
            position: 'TOP_LEFT'
        },
        panControl : false,
      });
    map.addMarker({
          lat: 51.503324,
          lng: -0.119543,
          title: 'London Eye',
          infoWindow: {
            content: '
    The London Eye is a giant Ferris wheel situated on the banks of the River Thames in London, England. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).
    ' }
        });
    Il me semble pas qu'il y ait d'autres modifications à effectuer?

  7. #7
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    Mars 2011
    Messages
    3 179
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : Mars 2011
    Messages : 3 179
    Points : 19 374
    Points
    19 374
    Par défaut
    Non en effet rien de plus à mettre

    Tu as vérifié dans la console que tu n'avais pas d'erreur JavaScript ? Tu es sûr que ton conteneur est bien défini avec le bon CSS ?
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  8. #8
    Membre du Club
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    110
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 110
    Points : 57
    Points
    57
    Par défaut
    C'est incompréhensible, j'ai enregistré les fichiers du tuto et créé une page map.html. Celle-ci s'affiche avec toutes les cartes, j'ai donc décidé de faire appeler les fichiers :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="js/gmaps.js"></script>
    <script src="js/core.js"></script>
    sur mon site et le resultat est identique que précédemment, #basic_map affiche bien la carte mais toutes les autres DIV ne renvoient rien...

  9. #9
    Membre du Club
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    110
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 110
    Points : 57
    Points
    57
    Par défaut
    Je me permets de revenir vers vous et vous montrer mon code parceque là, je ne comprends plus...

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <html>
        <head>
            <meta charset="utf-8" />
            <link rel="stylesheet" href="css/styles.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="js/gmaps.js"></script>
    <script src="js/core.js"></script>
        </head>
    <body>
    ...
    <div id="pointers_map" class="map"></div>
    ...
    </body>
    </html>
    Le fichier gmaps.js et core.js sont directement enregistrés depuis le tuto.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    /**
     * Map Pointers
     */
    $(document).ready(function(){
     var map = new GMaps({
        el: '#pointers_map',
        lat: 51.5073346,
        lng: -0.1276831,
        zoom: 13,
        zoomControl : true,
        zoomControlOpt: {
            style : 'SMALL',
            position: 'TOP_LEFT'
        },
        panControl : false,
      });
    	map.addMarker({
          lat: 51.503324,
          lng: -0.119543,
          title: 'London Eye',
          infoWindow: {
            content: '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames in London, England. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' }
        });

  10. #10
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    Mars 2011
    Messages
    3 179
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : Mars 2011
    Messages : 3 179
    Points : 19 374
    Points
    19 374
    Par défaut
    Tu peux montrer ton css ?
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  11. #11
    Membre du Club
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    110
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 110
    Points : 57
    Points
    57
    Par défaut
    Voici mon CSS:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    #pointers_map{margin:10px 0 10px 0;}
     
    .map {
    	display: block;
    	width: 100%;
    	height: 250px;
    	margin: 0 auto;
    }

  12. #12
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    Mars 2011
    Messages
    3 179
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : Mars 2011
    Messages : 3 179
    Points : 19 374
    Points
    19 374
    Par défaut
    Ben écoute je sèche

    A part vérifier que tu n'aies pas d'erreur JavaScript je vois pas...
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  13. #13
    Membre averti Avatar de SPACHFR
    Profil pro
    Paaaaaa
    Inscrit en
    Février 2004
    Messages
    557
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Paaaaaa

    Informations forums :
    Inscription : Février 2004
    Messages : 557
    Points : 400
    Points
    400
    Par défaut
    Bonjour,

    J'ai exactement le même problème.
    J'essaie juste le basic sample.
    Les scripts sont correctement déclarés, mon div à bien une class (j'ai fais les déclaration inline via style= ) mais rien à l'affichage.

    En vérifiant avec FireBug, j'ai trouvé le message suivant :
    GMaps is not defined
    var map = new Gmaps({
    C'est comme si l'objet Gmaps n'existait pas et donc ne peu pas être instancier d'où l'absence d'affichage.

    Je cherche de mon coté mais si quelqu'un à trouvé la solution merci de la partager.

    Merci
    S'il n'y a pas de solution c'est qu'il n'y a pas de problème.

  14. #14
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    Mars 2011
    Messages
    3 179
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : Mars 2011
    Messages : 3 179
    Points : 19 374
    Points
    19 374
    Par défaut
    Vous êtes sûr que vos path sont bons dans vos <script></script> pour les fichiers JavaScript ?
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  15. #15
    Membre averti Avatar de SPACHFR
    Profil pro
    Paaaaaa
    Inscrit en
    Février 2004
    Messages
    557
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Paaaaaa

    Informations forums :
    Inscription : Février 2004
    Messages : 557
    Points : 400
    Points
    400
    Par défaut
    C'est OK, j'avais juste oublier le gmaps.js
    S'il n'y a pas de solution c'est qu'il n'y a pas de problème.

  16. #16
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mai 2013
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2013
    Messages : 5
    Points : 6
    Points
    6
    Par défaut
    Bonjour,
    avez vous des problemes d'affichage avec ie 7

    sur le lien quand j'utilise ie 7 rien ne s'affiche, peut on resoudre ce probleme ?
    http://paulund.developpez.com/tutori...iers/demo.html

  17. #17
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    Mars 2011
    Messages
    3 179
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : Mars 2011
    Messages : 3 179
    Points : 19 374
    Points
    19 374
    Par défaut
    Le script utilise une API qui n'est très certainement pas supportée sur IE7
    Il n'y a donc rien à corriger c'est tout simplement pas compatible avec cette version de IE.
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  18. #18
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mai 2013
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2013
    Messages : 5
    Points : 6
    Points
    6
    Par défaut
    Merci

  19. #19
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Cela provient de la notation des objets dans le script.
    Pour IE7 et inférieurs, la dernière propriété ne doit pas être suivie de virgule.
    Si dans le script tu retires toutes les virgules se trouvant après la déclaration de la dernière propriété, ça devrait aller mieux.
    Exemple
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $(document).ready(function(){
     var map = new GMaps({
        el: '#basic_map',
        lat: 51.5073346,
        lng: -0.1276831,
        zoom: 12,
        zoomControl : true,
        zoomControlOpt: {
            style : 'SMALL',
            position: 'TOP_LEFT'
        },
        panControl : false,    // ICI, virgule en trop
      });
    });
    à remplacer par
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $(document).ready(function(){
     var map = new GMaps({
        el: '#basic_map',
        lat: 51.5073346,
        lng: -0.1276831,
        zoom: 12,
        zoomControl : true,
        zoomControlOpt: {
            style : 'SMALL',
            position: 'TOP_LEFT'
        },
        panControl : false    // ICI virgule supprimée
      });
    });
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  20. #20
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mai 2013
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2013
    Messages : 5
    Points : 6
    Points
    6
    Par défaut
    J'ai essayé un peu tout et même sous ie8 ca ne fonctionne pas
    Pas de pb sous chrome ni firefox ni safari
    Mon code

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
     
    <div div class="map" id="map" style="width:100%; height:590px;"></div>
     
    <script>
    $('#map').gmap3({
     map: {
        options: {
          maxZoom: 14 
        }  
     },
     marker:{
        address: "Haltern am See, Weseler Str. 151",
        options: {
         icon: new google.maps.MarkerImage(
           "http://gmap3.net/skin/gmap/magicshow.png",
           new google.maps.Size(32, 37, "px", "px")
         )
        }
     }
    },
    "autofit" );
    code issue de la
    http://gmap3.net/en/pages/5-getting-...nstallation-13

Discussions similaires

  1. [Google Maps] Détection des coins de la carte google map
    Par betadev dans le forum APIs Google
    Réponses: 3
    Dernier message: 27/12/2011, 10h40
  2. [AJAX] Intégrer une carte google map avec ajax
    Par Piapia78 dans le forum AJAX
    Réponses: 12
    Dernier message: 29/06/2011, 17h06
  3. Réponses: 1
    Dernier message: 19/08/2010, 10h11
  4. [Google Maps] map avec des markeurs
    Par miro1985 dans le forum APIs Google
    Réponses: 1
    Dernier message: 04/09/2009, 15h41

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo