google maps api 3 - navegador - Los controles de zoom del mapa no se muestran correctamente

navegador compatible con la api de javascript de google maps

Question

Esta pregunta ya tiene una respuesta aquí:

• Google Map Infowindow no se muestra correctamente 5 respuestas

Creé un mapa simple usando API3. Sin embargo, los controles de zoom en la parte superior izquierda se ven "aplastados", es decir, no se muestran correctamente. El resto del mapa está bien. Lo extraño es que he usado el mismo método que para sitios anteriores, donde las cosas funcionan bien.

Aquí hay un código:

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var marker;
var markersArray=[];
var html; //to create urls
var directionsVisible = new Boolean();
directionsVisible = false;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var orchards = new google.maps.LatLng(52.512805,-2.76007);
var myOptions = {
zoom:14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: orchards,
panControl: false
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
addMarker(orchards);
}

Answer 1

El problema debería ser debido a la img { max-width: 100%; } universal img { max-width: 100%; } img { max-width: 100%; }

Prueba esto en tu css

.gmnoprint img {
max-width: none;
}

Answer 2

Inicialmente me enfrento al mismo problema, luego me doy cuenta

google.maps.event.addDomListener (ventana, ''cargar'', inicializar);

juega un papel muy importante.

Lo agregué y para mí funciona.

Pagar el siguiente código

Código CSS

<style>
#divmap {
height: 300px;
width:100%;
margin: 10px;
padding: 10px;
}
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>

Para JS

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(21,78),
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
}
var map = new google.maps.Map(document.getElementById("divmap"),
mapOptions);
}
google.maps.event.addDomListener(window, ''load'', initialize);
</script>

y final html

<div id="divmap"></div>

Answer 3

si está utilizando la función de cuadrícula de fluido de Dreamweaver, su configuración predeterminada debería verse así:

img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}

Prueba esto:

object, embed, video {
max-width: 100%;
}
#map_canvas img { max-width: none; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}

simplemente reemplace el código tal como es.