Pulsanti di zoom personalizzati per Google Maps API V3

-5

Questo non è possibile. Puoi modificare leggermente il loro aspetto utilizzando un set di parametri di opzione predefiniti oppure puoi implementare il tuo controllo mappa personalizzato che fornisce le stesse funzionalità del controllo zoom. Per ulteriori informazioni, vedere this page.

AGGIORNATO: collegamento fisso. Grazie per il feedback!

fonte

2011-10-27 13:41:14

+0

il link non funziona? – HAWKES08

+0

Si prega di correggere il collegamento o inviare le istruzioni pertinenti nella risposta. – Sparky

+0

[link Fisso qui] (http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/controls.html). Ha appena perso la "L" alla fine di "htm". – RASG

13

Dopo ore di ricerca ho trovato la soluzione Assicurati solo di sostituire il tuo ID API! Divertiti!

<!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>

fonte

2013-06-03 04:33:40

+0

è possibile aggiungere un pulsante Pegman personalizzato? – Anuket

+0

@Antonio Almeida Grazie –

3

l'ho fatto in modo 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; }

Questo è per un'immagine che ha: width: 42px; altezza: 68px;

Apportare le proprie regolazioni.

ATTENZIONE

Questo vale solo se si utilizza la versione inglese a causa di attributi del titolo.

fonte

2014-02-11 18:54:17 PAdrian

+0

Molto bene! Funziona perfettamente bene per me! – SquareCat

+2

Questo funzionerà fintanto che la struttura fornita dall'interfaccia utente di Google Maps rimane la stessa, non dovresti mai fare affidamento su regole hard coded per raggiungere il tuo obiettivo. – torresomar

18

Sono in ritardo alla festa, ma ecco i miei due centesimi.

Si sono fondamentalmente due opzioni:

Opzione 1: O si creano i controlli utilizzando HTML/CSS te stesso, che è quindi possibile inserire per la mappa nella posizione corretta utilizzando mezzi posizione assoluti o simili. Anche se questo funziona in produzione, non mi piace, perché il tuo HTML/CSS per l'elemento non viene caricato nello stesso momento della visualizzazione della mappa. Inoltre stai separando il tuo codice HTML/CSS per i controlli, quindi è più difficile riutilizzare la stessa mappa su pagine diverse. per esempio. "Ho dimenticato di aggiungere i controlli?"

Opzione 2: Si creaa custom control che guarda e si sente i controllori di zoom che ti piace. Di seguito è riportato un codice su questo in pratica.

In breve, è necessario disattivare prima i controllori di interfaccia utente normale chiamando:

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

E poi basta creare il controller e usarlo.

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: Questo codice non contiene alcun fanc Icone y e simili, solo segnaposto. Pertanto, potrebbe essere necessario regolarlo in base alle proprie esigenze. Inoltre, ricorda di aggiungere tag normali HTML5 e includere script per google maps api v3 javascript. Ho aggiunto solo <div id="map-canvas"></div> perché una necessità per il resto del corpo è abbastanza ovvia.

di vederla dal vivo: Here is working jsfiddle example

Cin cin.

fonte

2014-08-08 09:44:30

+2

È fantastico. –

+1

Grazie mille per questo. –

+0

Funziona alla grande, grazie! Un piccolo miglioramento potrebbe essere dare ai nomi di classe dei controlli di zoom come 'controlWrapper.setAttribute (" class "," custom-zoom-wrapper ");' etc. Ciò significa che gli stili possono essere aggiunti in CSS anziché in js, portando a un codice più pulito e consentendo query multimediali, ad esempio pulsanti più piccoli su schermi più piccoli. – Davey

Pulsanti di zoom personalizzati per Google Maps API V3

risposta

Problemi correlati