web-dev-qa-db-fra.com

Google Map Infowindow ne s'affiche pas correctement

L’infowindow ne s’affiche pas correctement sur ma carte lorsque je clique sur un marqueur. Le site est ici.

Vous remarquerez également que le contrôle de la carte n'est pas correctement affiché non plus. 

    var map;
    var locations = <?php print json_encode(di_get_locations()); ?>;
    var markers = []
    jQuery(function($){
        var options = {
            center: new google.maps.LatLng(51.840639771473, 5.8587418730469),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), options);

        for (var i=0; i < locations.length;i++) {
            makeMarker(locations[i]);
        }
        centerMap();

    });
    function makeMarker(location) {
        var markerOptions = {map: map, position: new google.maps.LatLng(location.lat, location.lng)};
        var marker = new google.maps.Marker(markerOptions);
        markers.Push(marker);
        var content = '';

        var infowindow = new google.maps.InfoWindow(
          { content: "test",
            size: new google.maps.Size(50,50),
            disableAutoPan : true
          });


        google.maps.event.addListener(marker, 'click', function(e) {
            infowindow.open(map,marker);
        });
    }
    function centerMap() {
      map.setCenter(markers[markers.length-1].getPosition());
    }

Remarque: j'utilise Google Maps JS V3.

google-mapsgoogle-maps-api-3infowindow
29
Jenny

Le problème est forcé par ce format dans style.css:

img {
    height: auto;
    max-width: 100%;/* <--the problem occurs here*/
}

Ajoutez ceci à la fin de votre style.css pour appliquer la valeur par défaut aux images de la carte:

#map_canvas img{max-width:none}
96
Dr.Molle

Le problème peut être que vous utilisez img{ max-width: 100%; } comme universel. 

Essayez celui-ci dans votre css

.gmnoprint img {
    max-width: none; 
}
1
Mo.

Dans le cas de Magento, les contrôles de zoom de Google Map n'apparaissaient pas en raison d'un conflit avec la bibliothèque PROTOTYPE.

0
Paktas

J'avais essayé la plupart des réponses sur Internet mais cela ne servait à rien (ne fonctionnait pas), j'avais ajouté des contrôles de zoom CSS et de carte personnalisés qui sont également visibles, permettant également un clic sur le marqueur. Cette réponse est également utile pour cette question

 
 .gmnoprint {
 display: block! important 
} 
 .gmnoprint.gm-bundled-control.gm-bundled-control-on -bottom {
 display: block! important; 
} 
 .gm-tilt {
 display: none; 
} 
 .gm-iv-address {
 height: 56px; 
}
0
Kiran

J'ai résolu le problème avec: 

.gmnoprint img {
    max-height: none;  
}

au lieu de max-width.

Merci

0
Vlad