Publicité
+ Répondre à la discussion Actualité déjà publiée
Affichage des résultats 1 à 20 sur 20
  1. #1
    Responsable Développement Web

    Avatar de FirePrawn
    Homme Profil pro Sébastien Germez
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 120
    Détails du profil
    Informations personnelles :
    Nom : Homme Sébastien Germez
    Âge : 26
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 120
    Points : 22 054
    Points
    22 054

    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.

    Vous souhaitez participer à la rubrique Développement Web, contactez-moi !
    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
    Invité de passage
    Homme Profil pro Vincent LE BORGNE
    Développeur Web
    Inscrit en
    janvier 2013
    Messages
    1
    Détails du profil
    Informations personnelles :
    Nom : Homme Vincent LE BORGNE
    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 : 1
    Points
    1

    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
    16 470
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 16 470
    Points : 465 162
    Points
    465 162

    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.

    Pas de questions technique par messagerie privée (lisez les règles du forum Perl) et pour les nouveaux !

  4. #4
    Futur Membre du Club
    Inscrit en
    mai 2007
    Messages
    62
    Détails du profil
    Informations forums :
    Inscription : mai 2007
    Messages : 62
    Points : 16
    Points
    16

    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
    Responsable Développement Web

    Avatar de FirePrawn
    Homme Profil pro Sébastien Germez
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 120
    Détails du profil
    Informations personnelles :
    Nom : Homme Sébastien Germez
    Âge : 26
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 120
    Points : 22 054
    Points
    22 054

    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
    Vous souhaitez participer à la rubrique Développement Web, contactez-moi !
    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
    Futur Membre du Club
    Inscrit en
    mai 2007
    Messages
    62
    Détails du profil
    Informations forums :
    Inscription : mai 2007
    Messages : 62
    Points : 16
    Points
    16

    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 :
    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
    Responsable Développement Web

    Avatar de FirePrawn
    Homme Profil pro Sébastien Germez
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 120
    Détails du profil
    Informations personnelles :
    Nom : Homme Sébastien Germez
    Âge : 26
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 120
    Points : 22 054
    Points
    22 054

    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 ?
    Vous souhaitez participer à la rubrique Développement Web, contactez-moi !
    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
    Futur Membre du Club
    Inscrit en
    mai 2007
    Messages
    62
    Détails du profil
    Informations forums :
    Inscription : mai 2007
    Messages : 62
    Points : 16
    Points
    16

    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 :
    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
    Futur Membre du Club
    Inscrit en
    mai 2007
    Messages
    62
    Détails du profil
    Informations forums :
    Inscription : mai 2007
    Messages : 62
    Points : 16
    Points
    16

    Par défaut

    Je me permets de revenir vers vous et vous montrer mon code parceque là, je ne comprends plus...

    Code html :
    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 :
    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
    Responsable Développement Web

    Avatar de FirePrawn
    Homme Profil pro Sébastien Germez
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 120
    Détails du profil
    Informations personnelles :
    Nom : Homme Sébastien Germez
    Âge : 26
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 120
    Points : 22 054
    Points
    22 054

    Par défaut

    Tu peux montrer ton css ?
    Vous souhaitez participer à la rubrique Développement Web, contactez-moi !
    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
    Futur Membre du Club
    Inscrit en
    mai 2007
    Messages
    62
    Détails du profil
    Informations forums :
    Inscription : mai 2007
    Messages : 62
    Points : 16
    Points
    16

    Par défaut

    Voici mon CSS:
    Code :
    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
    Responsable Développement Web

    Avatar de FirePrawn
    Homme Profil pro Sébastien Germez
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 120
    Détails du profil
    Informations personnelles :
    Nom : Homme Sébastien Germez
    Âge : 26
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 120
    Points : 22 054
    Points
    22 054

    Par défaut

    Ben écoute je sèche

    A part vérifier que tu n'aies pas d'erreur JavaScript je vois pas...
    Vous souhaitez participer à la rubrique Développement Web, contactez-moi !
    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 confirmé Avatar de SPACHFR
    Inscrit en
    février 2004
    Messages
    535
    Détails du profil
    Informations forums :
    Inscription : février 2004
    Messages : 535
    Points : 265
    Points
    265

    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
    Responsable Développement Web

    Avatar de FirePrawn
    Homme Profil pro Sébastien Germez
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 120
    Détails du profil
    Informations personnelles :
    Nom : Homme Sébastien Germez
    Âge : 26
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 120
    Points : 22 054
    Points
    22 054

    Par défaut

    Vous êtes sûr que vos path sont bons dans vos <script></script> pour les fichiers JavaScript ?
    Vous souhaitez participer à la rubrique Développement Web, contactez-moi !
    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 confirmé Avatar de SPACHFR
    Inscrit en
    février 2004
    Messages
    535
    Détails du profil
    Informations forums :
    Inscription : février 2004
    Messages : 535
    Points : 265
    Points
    265

    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
    Invité de passage
    Inscrit en
    mai 2013
    Messages
    5
    Détails du profil
    Informations forums :
    Inscription : mai 2013
    Messages : 5
    Points : 4
    Points
    4

    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
    Responsable Développement Web

    Avatar de FirePrawn
    Homme Profil pro Sébastien Germez
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 120
    Détails du profil
    Informations personnelles :
    Nom : Homme Sébastien Germez
    Âge : 26
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 120
    Points : 22 054
    Points
    22 054

    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.
    Vous souhaitez participer à la rubrique Développement Web, contactez-moi !
    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
    Invité de passage
    Inscrit en
    mai 2013
    Messages
    5
    Détails du profil
    Informations forums :
    Inscription : mai 2013
    Messages : 5
    Points : 4
    Points
    4

    Par défaut

    Merci

  19. #19
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    21 940
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 43
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : juin 2008
    Messages : 21 940
    Points : 81 076
    Points
    81 076

    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 :
    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 :
    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
    Invité de passage
    Inscrit en
    mai 2013
    Messages
    5
    Détails du profil
    Informations forums :
    Inscription : mai 2013
    Messages : 5
    Points : 4
    Points
    4

    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 :
    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

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •