谷歌地图不显示缩放控件

Question

我正在使用gmaps.js插件http://hpneo.github.com/gmaps/

滑动缩放控件和信息窗口在显示时存在一些问题。链接：http://bakasura.in/startupsradar/index.html

// JavaScript Document
$(document).ready(function () {
    var map = new GMaps({
        div: '#map',
        lat: 13.00487,
        lng: 77.576729,
        zoom: 13,
    });

    GMaps.geolocate({
        success: function (position) {
            map.setCenter(position.coords.latitude, position.coords.longitude);
        },
        error: function (error) {
            alert('Geolocation failed: ' + error.message);
        },
        not_supported: function () {
            alert("Your browser does not support geolocation");
        },
        always: function () {
            //alert("Done!");
        }
    });

    map.addControl({
        position: 'top_right',
        text: 'Geolocate',
        style: {
            margin: '5px',
            padding: '1px 6px',
            border: 'solid 1px #717B87',
            background: '#fff'
        },
        events: {
            click: function () {
                GMaps.geolocate({
                    success: function (position) {
                        map.setCenter(position.coords.latitude, position.coords.longitude);
                    },
                    error: function (error) {
                        alert('Geolocation failed: ' + error.message);
                    },
                    not_supported: function () {
                        alert("Your browser does not support geolocation");
                    }
                });
            }
        }
    });

    map.addMarker({
        lat: 13.00487,
        lng: 77.576729,
        title: 'Lima',
        icon: "http://i.imgur.com/3YJ8z.png",
        infoWindow: {
          content: '<p>HTML Content</p>'
        }
    });

});

- Harsha M V

---

也许你自己的CSS/JavaScript与地图的CSS/JavaScript发生了冲突？ - Uwe Keim

@UweKeim 是的，那是最好的选择。我正在尝试看看是什么。 - Harsha M V

@UweKeim 移除 Bootstrap CSS 文件后，地图可以正确显示 :( 这太不可思议了。 - Harsha M V

Answer 1

在渲染地图时，Bootstrap存在冲突。

添加以下CSS代码可以解决问题。

/* Bootstrap Css Map Fix*/
#mainBody #map img { 
  max-width: none;
}
/* Bootstrap Css Map Fix*/
#mainBody #map label { 
  width: auto; display:inline; 
} 

- Harsha M V

Answer 2

我之前遇到过这种情况，是因为我的一些CSS覆盖了地图中的某些值。建议检查应用于img标签的所有样式。特别是全局设置为图像的宽度值。

- thatgerhard