2012-06-23 85 views
16

我使用gmaps.js插件http://hpneo.github.com/gmaps/谷歌地圖不顯示縮放控制

滑動變焦控制和信息窗口不顯示出來,並有一些問題時,他們顯示。鏈接:http://bakasura.in/startupsradar/index.html

enter image description here

// 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>' 
     } 
    }); 

}); 
+0

也許你自己的CSS/JavaScript會干涉地圖CSS/JavaScript? –

+1

@UweKeim是的,這是最好的選擇。我想看看是什麼。 –

+1

@UweKeim刪除引導CSS文件呈現地圖正確:(這是瘋了 –

回答

48

引導用的地圖

添加CSS的這些線路的伎倆

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

我以前出現過此渲染矛盾的,這是一些我自己的CSS覆蓋了地圖中的一些值。我建議檢查應用於img標籤的所有樣式。特別是全局設置爲圖像的寬度值。