2011-11-08 8 views
13

Estoy buscando mover los controles de zoom en la API de JavaScript de Google Maps de izquierda a derecha. Si dejamos la configuración por defecto tenemos esto: default google apiMueva la barra de zoom hacia la derecha con Google Maps API v3

si lo muevo más de este modo:

panControl: true, 
    panControlOptions: { 
    position: google.maps.ControlPosition.TOP_RIGHT 
}, 
zoomControl: true, 
zoomControlOptions: { 
    style: google.maps.ZoomControlStyle.LARGE, 
    position: google.maps.ControlPosition.RIGHT_TOP 
} 

A continuación, obtener esto:

right api

También he notado que si lo configura a la izquierda (no por defecto), obtiene:

left

Lo ideal es que me guste a la derecha y centrado a los controles de panorámica al igual que la configuración predeterminada, pero en el otro lado. ¿Hay alguna forma de hacer esto?

Respuesta

21

Sí, puedes hacerlo. Debe colocar panControl y zoomControl en una sola posición: google.maps.ControlPosition.TOP_RIGHT o google.maps.ControlPosition.RIGHT_TOP.

uso ya sea:

panControl: true, 
panControlOptions: { 
    position: google.maps.ControlPosition.TOP_RIGHT 
}, 
zoomControl: true, 
zoomControlOptions: { 
    style: google.maps.ZoomControlStyle.LARGE, 
    position: google.maps.ControlPosition.TOP_RIGHT 
} 

o:

panControl: true, 
    panControlOptions: { 
    position: google.maps.ControlPosition.RIGHT_TOP 
}, 
zoomControl: true, 
zoomControlOptions: { 
    style: google.maps.ZoomControlStyle.LARGE, 
    position: google.maps.ControlPosition.RIGHT_TOP 
} 

Una explicación simple es que los mapas de Google tienen un contenedor en cada posición de los controles. Cada uno de estos contenedores se posiciona y escala de manera que todos los controles necesarios quepan. Un control se centra luego si queda algo de espacio (en este caso, el ancho del contenedor está especificado por el ancho de panControl). Si coloca los controles en posiciones separadas, se colocan en contenedores separados que se adaptan a la escala y se colocan adecuadamente.

+0

Gracias, ¡estaba seguro de que intenté esto pero obviamente no! –

+0

Una imagen sobre RIGHT_TOP y TOP_RIGHT https://developers.google.com/maps/documentation/javascript/images/control-positions.png – PJunior

+0

Oye, ¿podemos estilizarla también? Si quiero agregar imágenes personalizadas o estilo para botones de zoom, ¿es posible? –