Discussion :

[nolookpass8]

Bonjour à tous,

J'ai un problème d'affichage de carte générée avec l'api google maps v3.

Je précise que j'ai 2 carte google maps sur la même page (1 carte affichée directement à l'arrivée sur la page et l'autre au clic sur un bouton et qui génère une fancybox avec la carte dedans ^^)

En PJ une photo de mon problème ...

Merci bonne journée.

[Bovino]

Je suis quasiment sûr que ça vient de ton code...
Et comme la jurisprudence interdit désormais de chercher ces infos dans les entrailles d'animaux, on va pas pouvoir t'aider beaucoup plus !

[NoSmoking]

Bonjour,
un petit indice quand même
Pourquoi ma carte ne s'affiche pas complètement quand je la rends visible ?, c'est pas pile poil mais l'idée est là.

@Bovino: il reste le marc de café même si je lui préfère le marc de Bourgogne

[nolookpass8]

Merci pour vos réponses,

NoSmoking merci pour ce lien, le code css de ma div est le suivant :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.map_jour{
    width:640px; 
    height:640px;
    margin: auto;
    border: 2px solid #EEEEEE;
    line-height: normal ! important;//important pour supprimer la scrollbar des infowindow
}

je pense que ça ne pose pas de problème.

Bovino voici le code :

code où je lance la fonction (dans un success d'une requête ajax ^^)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
var start = data[0];
var end = data[1];
$('#map_jour').addClass('map_jour');
load_jour(id_product, jour_nombre, start, end);
$.fancybox({
    'autoDimensions': true,
    'transitionIn': 'fade',
    'transitionOut': 'fade',
    'openSpeed': 800,
    'title': data[2] + ' | Cartographie du jour ' + jour_nombre + '',
    'type': 'inline',
    'href': '#map_jour'
});

code de ma fonction google maps :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
function load_jour(id_product, jour_nombre, start, end) {
    //mapOptions
    var mapOptions_jour = {
        zoom: 20,
        mapTypeControlOptions: {
            mapTypeControl: true
        }
    };
    var map_jour = new google.maps.Map(document.getElementById('map_jour'),
            mapOptions_jour);
    //instanciation d'un service d'itinéraire
    var directionsService_jour = new google.maps.DirectionsService();
    //options d'affichage de l'itinéraire
    var rendererOptions_jour = {
        map: map_jour,
        suppressMarkers: true//supprimmer les markers de l'itinéraire (Point A,B,C etc.)
    };
    var directionsDisplay_jour = new google.maps.DirectionsRenderer(rendererOptions_jour);
    //modifier la couleur bleu de l'itinéraire
    var polyOptions_jour = {
        //strokeColor: '#009FE3', //cyan
        strokeColor: '#0bb14d', //vert
        strokeOpacity: 0.70, //opacité du trait
        strokeWeight: 5//largeur du trait
    };
    directionsDisplay_jour.setOptions({
        polylineOptions: polyOptions_jour
    }); //modifier la couleur bleu de l'itinéraire
    // downloadUrl génère le fichier xml
    downloadUrl("index.php?controller=generer-xml-circuit", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("activite");
 
        /************************************ DEBUT MARKERS *********************************/
        /*var lastPosition = document.getElementById('lastPosition').value;
         var firstPosition = document.getElementById('firstPosition').value;*/
        for (var i = 0; i < markers.length; i++) {//i = 0 et i < length pour avoir tous les markers
            if (markers[i].getAttribute("id_product") === id_product && markers[i].getAttribute("jour") === jour_nombre) {//si id_product du genxml == hidden du controller --> pour avoir uniquement les infos du circuit demandé et du JOUR
                var idTa = markers[i].getAttribute("idTa");
                var idAct = markers[i].getAttribute("idAct");
                var nameActivite = markers[i].getAttribute("nameActivite");
                var adressePostale = markers[i].getAttribute("adresse") + "<br />" + markers[i].getAttribute("cp") + " " + markers[i].getAttribute("ville") + " " + markers[i].getAttribute("nameCountry");
                /*var position = markers[i].getAttribute("position");
                 var nameTypeactivite = markers[i].getAttribute("nameTypeactivite");*/
                var descriptionActivite = markers[i].getAttribute("descriptionActivite");
                var latitude = parseFloat(markers[i].getAttribute("lat"));
                var longitude = parseFloat(markers[i].getAttribute("lng"));
                var point = new google.maps.LatLng(latitude, longitude);
                var myMarkerImage_jour = new google.maps.MarkerImage('img/ta/' + idTa + '.jpg');
                /*if (position === firstPosition || position === lastPosition) {
                 var title = nameTypeactivite;
                 } else {
                 title = "Etape " + position;
                 }*/
                var marker_jour = new google.maps.Marker({
                    position: point,
                    map: map_jour,
                    cursor: 'default',
                    //title: title,
                    icon: myMarkerImage_jour,
                    animation: google.maps.Animation.DROP
                });
                //personnaliser une infoWindow avec la librairie InfoBubble
                var infoWindowBdd_jour = new InfoBubble({
                    map: map_jour,
                    shadowStyle: 0, // Style de l'ombre de l'infobulle (0, 1 ou 2)
                    padding: 10, // Marge interne de l'infobulle (en px)
                    content: "<div style='line-height: normal ! important;'><p style='display:block;text-align:justify;color:#666666;'><b style='font-size:16px;'>" + nameActivite + "</b><br /><img style='width:60px;height:60px;' src='../~voyagere/img/act/" + idAct + ".jpg'/><br /><br /><b>Adresse postale :</b><br />" + adressePostale + "<br /><br /><b>Description :</b> " + descriptionActivite + "</p></div>",
                    backgroundColor: '#FFFFFF', // Couleur de fond de l'infobulle
                    borderRadius: 0, // Angle d'arrondis de la bordure
                    arrowSize: 12, // Taille du pointeur sous l'infobulle
                    borderWidth: 0, // Épaisseur de la bordure (en px)
                    //borderColor: '#666666', // Couleur de la bordure
                    disableAutoPan: false, // Désactiver l'adaptation automatique de l'infobulle
                    hideCloseButton: true, // Cacher le bouton 'Fermer'
                    arrowPosition: 50, // Position du pointeur de l'infobulle (en %)
                    arrowStyle: 0, // Type de pointeur (0, 1 ou 2)
                    disableAnimation: false, // Désactiver l'animation à l'ouverture de l'infobulle
                    maxWidth: 400
                });
                bindInfoWindow(marker_jour, map_jour, infoWindowBdd_jour); //permet l'affichage des infobulles pour les markers de la bdd
            }
        }
        /********************************************** FIN MARKERS ***************************************************/
        /********************************************** DEBUT ITINERAIRE *************************************************/
        var wayPointArray = new Array(); //création d'un tableau vide
        for (var i = 1; i < (markers.length - 1); i++) {//on a besoin d'avoir que les coordonnées des étapes donc on commence à 1 et on finit à - 1
            if (markers[i].getAttribute("id_product") === id_product && markers[i].getAttribute("jour") === jour_nombre) {//si id_product du genxml == hidden du controller --> pour avoir uniquement les infos du circuit demandé
                var latitude = parseFloat(markers[i].getAttribute("lat")).toFixed(3);
                var longitude = parseFloat(markers[i].getAttribute("lng")).toFixed(3);
                var point = new google.maps.LatLng(latitude, longitude);
                wayPointArray.push({//tous les points sont ajoutés à wayPointArray
                    location: point, //coord gps
                    stopover: true//true --> passage par ce point dans le calcul de l'itinéraire
                });
            }
        }
        var request = {
            origin: start, //départ
            destination: end, //arrivée
            waypoints: wayPointArray, //tableau
            travelMode: google.maps.TravelMode.DRIVING //mode voiture
        };
        directionsService_jour.route(request, function(response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                directionsDisplay_jour.setDirections(response);
            }
            //CI-DESSOUS LES ERREURS POSSIBLES SI L'ITINERAIRE NE S'AFFICHE PAS
            if (status === google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED) {//google maps limite à 8 le nombre de markers pour un itinéraire
                alert("Trop de DirectionsWaypoints ont été fournis dans DirectionsRequest. Le nombre maximum d'étapes autorisées est de 8, en plus de l'origine et de la destination. Les utilisateurs de l'API Google Maps pour les entreprises ont droit jusqu'a 23 étapes, en plus de l'origine et de la destination. Les étapes ne sont pas supportées pour les calculs d'itinéraires via les transports en commun."); //msg d'erreur
                window.location.href = "javascript:history.back()"; //redirection page précédente
            }
            if (status === google.maps.DirectionsStatus.ZERO_RESULTS) {
                alert("Aucun itinéraire n'a pu être trouvé entre le point de départ et l'arrivée.");
                window.location.href = "javascript:history.back()";
            }
            if (status === google.maps.DirectionsStatus.INVALID_REQUEST) {
                alert("Le DirectionsRequest fourni n'était pas valide. Les causes les plus fréquentes, liées à ce code d'erreur, sont des requêtes incomplètes, soit l'origine ou soit la destination, ou une requête de transport en commun comportant des étapes.");
                window.location.href = "javascript:history.back()";
            }
            if (status === google.maps.DirectionsStatus.NOT_FOUND) {
                alert("L'un des emplacements au moins (départ, origine ou étape) n'a pas pu être géocodé.");
                window.location.href = "javascript:history.back()";
            }
            if (status === google.maps.DirectionsStatus.OVER_QUERY_LIMIT) {
                alert("La page Web a émis trop de reqûetes dans les délais autorisés.");
                window.location.href = "javascript:history.back()";
            }
            if (status === google.maps.DirectionsStatus.UNKNOWN_ERROR) {
                alert("La requête relative au calcul d'itinéraire n'a pas pu être traitée en raison d'une erreur serveur. La requête peut aboutir si vous essayez de nouveau.");
                window.location.href = "javascript:history.back()";
            }
            if (status === google.maps.DirectionsStatus.REQUEST_DENIED) {
                alert("La page Web n'est pas autorisée à utiliser le service de calcul d'itinéraires.");
                window.location.href = "javascript:history.back()";
            }
        });
        /*********************************************** FIN ITINERAIRE ***********************************************/
    });
}

[NoSmoking]

je pense que ça ne pose pas de problème.

si quand même car avant d'être affichée la carte est en display:none.

Une solution, la plus presque propre, est de forcer la redimensionnement de la carte une fois la fancyBox visible.

Il suffit de faire un google.maps.event.trigger(oMap, 'resize'); dans le onComplete.

Voici un petit exemple d'une façon de faire

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>[GoogleMaps] Ouverture dans FancyBox</title>
<link rel="stylesheet" type="text/css" href="http://fancybox.net//js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" media="screen">
<style>
#page{
  width:50em;
  margin:0 auto;
}
#cadre_carte {
  display:none;
  width:600px;
  height:600px;
  margin:0 auto;
}
#div_carte {
  height:600px;
  width:600px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
$(document).ready(function() {
  var oMap,
      oCentre = new google.maps.LatLng( 46.80, 1.70);
  // création de la carte
  oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
    'center' : oCentre,
    'zoom' : 6
  });
  
  $("#open_carte").fancybox({
      onComplete:       function() {
      // redim de la carte et recentrage
      google.maps.event.trigger( oMap, 'resize');
      oMap.setCenter( oCentre);
    }
  });
});
</script>
</head>
<body>
<div id="page">
  <h1>Google Map dans FancyBox</h1>
  <a id="open_carte" href="#div_carte">Voir la carte</a>
  <div id="cadre_carte">
    <div id="div_carte"></div>
  </div>
</div>
</body>
</html>

et le JS utile

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
$(document).ready(function() {
  var oMap,
      oCentre = new google.maps.LatLng( 46.80, 1.70);
  // création de la carte
  oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
    'center' : oCentre,
    'zoom' : 6
  });
 
  $("#open_carte").fancybox({
      onComplete:	function() {
      // redim de la carte et recentrage
      google.maps.event.trigger( oMap, 'resize');
      oMap.setCenter( oCentre);
    }
  });
});

[nolookpass8]

En fait j'ai trouvé une autre solution, je n'arrivais pas à faire fonctionner ton code et je voyais bien que c'était la fancybox qui merdait et non le css (après j'utilisais peut-être mal tes indications ..)

Bref j'ai fais ça dans mon success de ma fonction ajax :

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
success: function(data){
    var start = data[0];
    var end = data[1];
    $('#map_jour').addClass('map_jour');
    load_jour(id_product, jour_nombre, start, end);
    $.fancybox({
        'autoDimensions': true,
        'transitionIn': 'fade',
        'transitionOut': 'fade',
        'openSpeed': 800,
        'title': data[2],
        'type': 'inline',
        'href': '#map_jour',
        'afterClose': function() {
            $('#map_jour').remove();
        }
    });
}

et juste avant le success au click sur le bouton qui déclenche la fancybox :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$(this).append('<div id="map_jour"></div>');

Bon wkd