google-maps - multiple - map addmarker

Google Maps no muestra los controles de zoom

Question

Estoy usando el complemento gmaps.js http://hpneo.github.com/gmaps/

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

Answer 1

Bootstrap estaba en conflicto con la prestación de mapas

Sumando 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;
}

Answer 2

Tenía esto antes, fue parte de mi propio CSS el que sobrescribió algunos de los valores en los mapas. Sugeriría verificar todos los estilos aplicados a las etiquetas img. Especialmente los valores de ancho que se configuran para imágenes globalmente.