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

**FirePrawn** · 21/12/2012, 12h44

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.

**pong1980** · 08/01/2013, 11h37

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

**djibril** · 27/02/2013, 10h39

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.

**Vinuto** · 13/03/2013, 17h14

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.

**FirePrawn** · 14/03/2013, 09h54

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

**Vinuto** · 14/03/2013, 11h11

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?

**FirePrawn** · 14/03/2013, 11h22

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 ?

**Vinuto** · 14/03/2013, 15h20

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

**Vinuto** · 18/03/2013, 10h48

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

**FirePrawn** · 18/03/2013, 10h55

Tu peux montrer ton css ?

**Vinuto** · 18/03/2013, 11h33

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

**FirePrawn** · 18/03/2013, 11h35

Ben écoute je sèche

A part vérifier que tu n'aies pas d'erreur JavaScript je vois pas...

**SPACHFR** · 21/03/2013, 12h17

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

**FirePrawn** · 21/03/2013, 12h22

Vous êtes sûr que vos path sont bons dans vos <script></script> pour les fichiers JavaScript ?

**SPACHFR** · 21/03/2013, 12h24

C'est OK, j'avais juste oublier le gmaps.js

**lgm77** · 30/05/2013, 14h02

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

**FirePrawn** · 30/05/2013, 14h47

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.

**lgm77** · 30/05/2013, 15h44

Merci

**Bovino** · 30/05/2013, 15h57

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

**lgm77** · 31/05/2013, 18h02

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

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

APIs Google

Discussions similaires

Partager

Partager