2012-06-23 2 views
16

Я использую плагин gmaps.js http://hpneo.github.com/gmaps/Google Maps не показывает управления масштабированием

Скользящий рычажок зуммирования и InfoWindow не показывают и есть некоторые проблемы, когда они отображают. Ссылка: 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 удаление файлов Bootstrap CSS делает карты правильными: (это безумие –

ответ

48

Bootstrap был конфликтует с оказанием Карты

Добавление этих строк 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. Особенно значения ширины, заданные для изображений во всем мире.