2012-06-23 31 views
16

estoy usando gmaps.js Plugin http://hpneo.github.com/gmaps/mapas de Google no muestra los controles del zoom

El deslizante de control de zoom y la ventana de información no se presenta y tienen algunos problemas cuando muestran. Enlace: 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

¿Alguna de sus propias interferencias de CSS/JavaScript con Maps CSS/JavaScript? –

+1

@UweKeim, sí, esa es la mejor opción. Estoy tratando de ver qué es. –

+1

@UweKeim eliminando los archivos CSS Bootstrap representa correctamente los Mapas :(esto es una locura –

Respuesta

48

Bootstrap entraba en conflicto con la prestación de Mapas

La adición de estas líneas de CSS hizo el truco

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

que tenía antes, que era una de mi propio CSS que sobrescribió algunos de los valores en los mapas. Sugeriría verificar todos los estilos aplicados a las etiquetas img. Especialmente valores de ancho que se establece en imágenes de forma global.

Cuestiones relacionadas