web-dev-qa-db-de.com

Google Map Infowindow wird nicht richtig angezeigt

Das Infofenster wird auf meiner Karte nicht richtig angezeigt, wenn Sie auf eine Markierung klicken. Die Website ist hier.

Sie werden auch feststellen, dass das Kartensteuerelement auch nicht richtig angezeigt wird. 

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

Hinweis: Ich verwende Google Maps JS V3.

29
Jenny

Das Problem wird durch dieses Format in style.css erzwungen:

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

Fügen Sie dies am Ende Ihrer style.css hinzu, um den Standardwert für Bilder in der Karte zu übernehmen:

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

Das Problem kann sein, dass Sie img{ max-width: 100%; } als universell verwenden. 

Versuchen Sie es in Ihrer CSS

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

In Magento-Fällen wurden Google Maps-Zoomsteuerelemente aufgrund eines Konflikts mit der PROTOTYPE-Bibliothek nicht angezeigt.

0
Paktas

Ich hatte die meisten Internet-Antworten ausprobiert, die aber nicht nützlich sind (funktionierten nicht). Ich hatte benutzerdefinierte CSS hinzugefügt und das Zoomen der Karte sichtbar. Diese Antwort ist auch für diese Frage hilfreich

 
 .gmnoprint {
 Anzeige: Block! Important 
} 
 .gmnoprint.gm-gebündelte-Steuerung.gm-gebündelte-Steuerung-on -Seite {
 Anzeige: Block! Wichtig; 
} 
 .gm-Tilt {
 Anzeige: keine; 
} 
 .gm-iv-address {
 Höhe: 56px; 
} 
 
0
Kiran

Ich habe das Problem gelöst mit: 

.gmnoprint img {
    max-height: none;  
}

anstelle von max-width.

Vielen Dank

0
Vlad