Gmaps中的工件

Question

我正在使用gMaps.js嵌入Google地圖。

基本上所有的功能都在工作，但是在一些地方，地圖會給出美感。

Screenshot (Check Zoom control and Infowindow)

下面的代碼被執行：

var map = new GMaps({ 
     div: '#map_canvas', 
     lat: 51.594664, 
     lng: 4.778375, 
     zoom: 16, 
     zoomControl: true, 
    scaleControl: false, 
    scrollwheel: false, 
    disableDoubleClickZoom: true, 
    }); 


var image = new google.maps.MarkerImage(
    '[image-link]', 
    new google.maps.Size(100,109), // size of the image 
    new google.maps.Point(0,0), // origin, in this case top-left corner 
    new google.maps.Point(5, 25) // anchor, i.e. the point half-way along the bottom of the image 
); 

map.addMarker({ 
    lat: 51.59554, 
    lng: 4.789006, 
    title: 'TEST', 
    icon: image, 
    infoWindow: { 
     content: '<h2>TEST</h2><p>HTML Content</p>' 
    } 
}); 

var styles = [ 
    { 
    "featureType": "landscape.man_made", 
    "stylers": [ 
     { "visibility": "on" } 
    ] 
    },{ 
    "featureType": "water", 
    "stylers": [ 
     { "visibility": "simplified" }, 
     { "color": "#21bbe2" } 
    ] 
    },{ 
    "featureType": "poi", 
    "stylers": [ 
     { "visibility": "off" } 
    ] 
    },{ 
    "featureType": "road", 
    "stylers": [ 
     { "visibility": "on" }, 
     { "hue": "#ff0011" }, 
     { "color": "#9e8baa" } 
    ] 
    } 
] 
    map.addStyle({ 
    styledMapName:"Styled Map", 
    styles: styles, 
    mapTypeId: "map_style" 
}); 

map.setStyle("map_style") 

我無法找到有關這個問題的任何。我試圖單獨刪除代碼的所有部分，但那不起作用。它發生在Chrome和Firefox中。任何解決方案

Answer 1

這幾乎總是由覆蓋在地圖內使用的樣式的頁面中的CSS引起的。我敢打賭，如果您將相同的地圖加載到沒有CSS的頁面中，則一切都會顯示正常。

當然現在的問題將是確定什麼位CSS是搞亂了它。你可以做的一件事就是在Chrome中使用DOM檢查器（或者在Firefox中使用Firebug，或者你喜歡的任何DOM檢查器）。選擇具有工件的元素之一，然後檢查該元素的「樣式」面板。

如果我的猜測是正確的，您將看到一個來自您自己的CSS的樣式條目，影響Maps API元素。