Discussion :

[FirePrawn]

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]

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]

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]

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]

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]

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?