Google Map Infowindow n'affichant pas correctement

L'infowindow ne s'affiche pas correctement sur ma carte en cliquant sur un marqueur. Le site web est ici.

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

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

Note: je suis en utilisant Google Maps JS V3.

  • Il n'y a plus d'un lien vers votre site et donc il est difficile de savoir quel est le problème que vous rencontrez. Votre question, comme il se est peu probable pour aider les utilisateurs dans l'avenir.
  • Il peut également être un problème similaire à celle décrite ici: stackoverflow.com/questions/1554893/...
InformationsquelleAutor Jenny | 2012-03-12
  1. 96

    La question est forcé par ce format à l'intérieur de style.css:

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

    Ajouter ceci à la fin de votre style.css pour appliquer la valeur par défaut de la valeur pour les images à l'intérieur de la carte:

    #map_canvas img{max-width:none}
    • Cela a résolu pour moi aussi. Si quelqu'un veut savoir à quoi il ressemble, voir i.stack.imgur.com/Bl8ci.png
    • C'était assez évident, mais il me permet de gagner un certain nombre de fois. Merci s'accoupler.
    • OMG, merci! Dans mon cas, le contrôle de zoom a été affecté par l'affichage de la mao à l'intérieur de Bootstrap fenêtre Modale....
    • Merci pour l'astuce!!! +1
    • Merci, il fixe, pour moi aussi.
    • +1 pour cette astuce. J'ai également le même problème
    • M. Molle, vous êtes une rockstar merci beaucoup
    • Fonctionne comme un charme! (+1)

    InformationsquelleAutor Dr.Molle
  2. 1

    La question peut-être êtes-vous à l'aide de img{ max-width: 100%; } comme universel.

    Essayez ceci dans votre css

    .gmnoprint img {
    max-width: none; 
}
    • Pourquoi l'affichage de la même chose que l'on a accepté de répondre à plus de 1 an plus tard ?
    • la raison pour laquelle img{max-width:100%} aura un effet sur d'autres propriétés css du projet. Dans le même temps .gmnoprint img:{max-width: none; } n'est pas va effet toutes les propriétés.
    • Vous avez raison, tout comme #map_canvas img{max-width:none} ne ...
    InformationsquelleAutor Mo.
  3. 0

    Dans Magento cas de google map commandes de zoom s'affichent en raison d'un conflit avec la librairie PROTOTYPE.

    InformationsquelleAutor Paktas
  4. 0

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

    .gmnoprint img {
    max-height: none;  
}

    au lieu de max-width.

    Grâce

    InformationsquelleAutor Vlad
  5. 0

    J'avais essayé la plupart des internet de réponses, mais qui ne sont pas utiles (ne fonctionne pas), j'avais ajouté css personnalisé et zoom sur la carte de contrôle sont visibles également activer le marqueur cliquez sur. Cette réponse est-elle utile pour cette question

     
.gmnoprint{ 
display: block !important 
} 
.gmnoprint.gm-livré de contrôle.gm-livré-contrôle-sur-le-bas { 
display: block !important; 
} 
.gm-tilt { 
display: none; 
} 
.gm-iv-adresse{ 
hauteur: 56px; 
}
    InformationsquelleAutor Kiran