1. Inicio
  2. Pregunta y respuesta
  3. Botones de zoom personalizados Google Map API V3

Botones de zoom personalizados Google Map API V3

2011-10-27 17 views

Respuesta

-5

Esto no es posible. Puede modificar un poco su apariencia mediante un conjunto de parámetros de opciones predefinidos o puede implementar su control de mapa personalizado que proporciona la misma funcionalidad que el control de zoom. Para obtener más información, consulte this page.

ACTUALIZADO: Enlace fijo. ¡Gracias por la respuesta!

Fuente

2011-10-27 13:41:14

+0

el enlace no funciona? – HAWKES08

+0

Corrija el enlace o publique las instrucciones pertinentes en su respuesta. – Sparky

+0

[Enlace fijo aquí] (http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/controls.html). Acaba de perder la "L" al final de "htm". – RASG

13

Después de horas buscando Encontré la solución ¡Solo asegúrese de reemplazar su ID de API! ¡Disfrútalo!

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map-canvas { height: 60%; width:60%; margin:20px auto; border:1px solid; padding-left:100px; } 
    </style> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=YOUR-MAP_API-ID&sensor=false&region=AU"> 
    </script> 



<script type="text/javascript"> 

function HomeControl(controlDiv, map) { 

google.maps.event.addDomListener(zoomout, 'click', function() { 
    var currentZoomLevel = map.getZoom(); 
    if(currentZoomLevel != 0){ 
    map.setZoom(currentZoomLevel - 1);}  
    }); 

    google.maps.event.addDomListener(zoomin, 'click', function() { 
    var currentZoomLevel = map.getZoom(); 
    if(currentZoomLevel != 21){ 
    map.setZoom(currentZoomLevel + 1);} 
    }); 

} 

var map; 
var markersArray = []; 


function initialize() { 

    var mapDiv = document.getElementById('map-canvas'); 
    var myLatlng = new google.maps.LatLng(-33.90224, 151.20215); 
    var mapOptions = { 
    zoom: 15, 
    center: myLatlng, 
    Marker: true, 
    panControl: false, 
    zoomControl: false, 
    streetViewControl: false, 
    overviewMapControl: false, 
    mapTypeControl: false, 
    mapTypeControl: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    map = new google.maps.Map(mapDiv, mapOptions); 
    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title:"Hello World!" 
    }); 

    // Create the DIV to hold the control and 
    // call the HomeControl() constructor passing 
    // in this DIV. 
    var homeControlDiv = document.createElement('div'); 
    var homeControl = new HomeControl(homeControlDiv, map); 

} 

google.maps.event.addDomListener(window, 'load', initialize);  

</script> 

</head> 




    <body> 
    <div id="map-canvas"></div> 
    <div id="zoomout" style="border:1px solid; width:150px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div> 
    <div id="zoomin" style="border:1px solid; width:150px; cursor:pointer; ">ZOOM ME IN</div> 
    </body> 
</html>

Fuente

2013-06-03 04:33:40

+0

¿es posible agregar un botón personalizado de Pegman? – Anuket

+0

@Antonio Almeida Gracias –

3

lo hice en la forma en CSS:

#map-container .gm-style > .gmnoprint > .gmnoprint { background: url(/images/map-zoom-controls.png) no-repeat center center !important; width: 42px !important; height: 68px !important; } 
#map-container .gm-style > .gmnoprint > .gmnoprint > div > img { display: none !important; } 
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom in"] { top: 2px !important; left: 2px !important; width: 38px !important; height: 31px !important; } 
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom out"] { top: 35px !important; left: 2px !important; width: 38px !important; height: 30px !important; }

Ésta es una imagen que tiene: Ancho: 42px; altura: 68px;

Haga sus propios ajustes.

ATENCIÓN

Esto se aplica sólo si está utilizando la versión Inglés debido a los atributos de título.

Fuente

2014-02-11 18:54:17 PAdrian

+0

¡Muy bien! ¡Funciona perfectamente bien para mí! – SquareCat

+2

Esto funcionará siempre que la estructura proporcionada por la interfaz de usuario de Google Maps siga siendo la misma, nunca se debe confiar en reglas codificadas para lograr su objetivo. – torresomar

18

Llego tarde a la fiesta, pero aquí está mi granito de arena.

Usted tiene básicamente dos opciones:

Opción 1: Usted bien crear los controles utilizando HTML/CSS a sí mismo, que luego se puede colocar sobre el mapa en la posición correcta utilizando la posición absoluta o medios similares. Aunque esto funciona en producción, no me gusta esto, porque tu HTML/CSS para el elemento no se carga al mismo tiempo que se muestra el mapa. También está separando su código HTML/CSS de los controles, por lo que es más difícil volver a utilizar el mismo mapa en diferentes páginas. p.ej. "¿Olvidé agregar los controles?"

Opción 2: Se creaa custom control que se ve y se siente los controladores de zoom que te gusta. A continuación hay un código sobre esto en la práctica.

En resumen, es necesario desactivar primero los controladores de interfaz de usuario normales llamando:

var mapOptions = { 
    zoom: 12, 
    center: chicago, 
    /* Disabling default UI widgets */ 
    disableDefaultUI: true // <-- see this line 
}

Y entonces acaba de crear el controlador y lo utiliza.

HTML:

... 
<div id="map-canvas"></div> 
...

CSS:

html, body, #map-canvas { 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
}

JavaScript:

var map; 
var chicago = new google.maps.LatLng(41.850033, -87.6500523); 

/** 
* The ZoomControl adds +/- button for the map 
* 
*/ 
function ZoomControl(controlDiv, map) { 

    // Creating divs & styles for custom zoom control 
    controlDiv.style.padding = '5px'; 

    // Set CSS for the control wrapper 
    var controlWrapper = document.createElement('div'); 
    controlWrapper.style.backgroundColor = 'white'; 
    controlWrapper.style.borderStyle = 'solid'; 
    controlWrapper.style.borderColor = 'gray'; 
    controlWrapper.style.borderWidth = '1px'; 
    controlWrapper.style.cursor = 'pointer'; 
    controlWrapper.style.textAlign = 'center'; 
    controlWrapper.style.width = '32px'; 
    controlWrapper.style.height = '64px'; 
    controlDiv.appendChild(controlWrapper); 

    // Set CSS for the zoomIn 
    var zoomInButton = document.createElement('div'); 
    zoomInButton.style.width = '32px'; 
    zoomInButton.style.height = '32px'; 
    /* Change this to be the .png image you want to use */ 
    zoomInButton.style.backgroundImage = 'url("http://placehold.it/32/00ff00")'; 
    controlWrapper.appendChild(zoomInButton); 

    // Set CSS for the zoomOut 
    var zoomOutButton = document.createElement('div'); 
    zoomOutButton.style.width = '32px'; 
    zoomOutButton.style.height = '32px'; 
    /* Change this to be the .png image you want to use */ 
    zoomOutButton.style.backgroundImage = 'url("http://placehold.it/32/0000ff")'; 
    controlWrapper.appendChild(zoomOutButton); 

    // Setup the click event listener - zoomIn 
    google.maps.event.addDomListener(zoomInButton, 'click', function() { 
    map.setZoom(map.getZoom() + 1); 
    }); 

    // Setup the click event listener - zoomOut 
    google.maps.event.addDomListener(zoomOutButton, 'click', function() { 
    map.setZoom(map.getZoom() - 1); 
    }); 

} 

function initialize() { 
    var mapDiv = document.getElementById('map-canvas'); 

    var mapOptions = { 
    zoom: 12, 
    center: chicago, 
    /* Disabling default UI widgets */ 
    disableDefaultUI: true 
    } 

    map = new google.maps.Map(mapDiv, mapOptions); 

    // Create the DIV to hold the control and call the ZoomControl() constructor 
    // passing in this DIV. 
    var zoomControlDiv = document.createElement('div'); 
    var zoomControl = new ZoomControl(zoomControlDiv, map); 

    zoomControlDiv.index = 1; 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv); 
} 

initialize();

Nota: Este código no contiene ninguna fanc y íconos y similares, solo marcadores de posición. Por lo tanto, es posible que deba ajustarlo para satisfacer sus necesidades. Por otra parte, recuerde agregar etiquetas HTML5 normales y script para google maps api v3 javascript. Agregué solo <div id="map-canvas"></div> porque la necesidad de descansar del cuerpo es bastante obvia.

verlo en directo: Here is working jsfiddle example

Saludos.

Fuente

2014-08-08 09:44:30

+2

Eso es increíble. –

+1

Muchas gracias por esto. –

+0

¡Esto funciona genial, gracias! Una pequeña mejora podría ser darle a los controles de zoom nombres de clase como 'controlWrapper.setAttribute (" clase "," custom-zoom-wrapper ");' etc. Esto significa que los estilos se pueden agregar en CSS en lugar de js, lo que lleva a un código más limpio y permite consultas de medios, es decir, botones más pequeños en pantallas más pequeñas. – Davey

Cuestiones relacionadas

 Cuestiones relacionadas