web-dev-qa-db-ja.com

Googleマップ情報ウィンドウが正しく表示されない

マーカーをクリックすると、情報ウィンドウがマップに正しく表示されません。ウェブサイトはこちらです。

また、マップコントロールも適切に表示されないことにも気づくでしょう。

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

注：私はGoogle Maps JS V3を使用しています。

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

この問題は、style.css内のこの形式によって強制されます。

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

これをstyle.cssの最後に追加して、マップ内の画像にデフォルト値を適用します。

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

問題は、img{ max-width: 100%; }をユニバーサルとして使用している可能性があります。

これをCSSに試してみてください

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

Magentoのケースでは、PROTOTYPEライブラリとの競合のため、Googleマップのズームコントロールが表示されませんでした。

0
Paktas

私はほとんどのインターネットの回答を試しましたが、それは役に立ちません（機能していません）。カスタムCSSを追加し、マップのズームコントロールが表示され、マーカーのクリックも有効になります。 この回答はこの質問にも役立ちます

 
。gmnoprint {
 display：block！important 
} 
。gmnoprint.gm-bundled-control.gm-bundled-control-on -bottom {
 display：block！important; 
} 
。gm-tilt {
 display：none; 
} 
 .gm-iv-address {
高さ：56px; 
}
0
Kiran

私は問題を解決しました：

.gmnoprint img {
    max-height: none;  
}

の代わりに max-width。

ありがとう

0
Vlad