Metti un pulsante sopra una mappa di google

Question

Vorrei mettere un pulsante in cima a una mappa di Google accanto ai pulsanti Mappa, Satellite e Ibrido.

Mi chiedevo se è possibile e come sarebbe il modo migliore per farlo?

Quindi le idee che ho sono sovrapponendo un'immagine sulla mappa di google che è cliccabile ma non sono sicuro se questo toglierà tutti gli eventi dalla mappa di google.

Avete qualche idea su come potrebbe essere fatto?

Answer 1

C'è una descrizione abbastanza buona di come fare questo here.

Sono abbastanza sicuro che puoi dare uno stile a questi ragazzi per assomigliare ai pulsanti standard e puoi sicuramente ancorarlo in alto a destra. Quando avrò la possibilità, farò un tentativo e aggiornerò con i miei risultati.

Aggiornamento:

ho avuto la possibilità di provare questo e funziona bene:

• Map example with Google style buttons
• Javascript Source

In pratica si finisce per fare cose molto simili di attuazione del pulsanti utilizzando GControl o semplicemente utilizzando il posizionamento assoluto di un DIV per la mappa (come suggerito ChrisB). Quindi non penso che esista un approccio corretto (o più semplice), è solo una questione di preferenze personali. In bocca al lupo.

Answer 2

Proprio per integrare la risposta di Cannonade, ecco il codice html/css che una Google Map utilizza controllo. È possibile replicare il css per farlo sembrare proprio come la cosa reale.

è possibile creare una GControl formale, o si può solo metterli sopra la Google Map con posizionamento assoluto.

pulsante attivo:

<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 15.3em;" title="Show street map"> 
    <div style="border-style: solid; border-color: rgb(52, 86, 132) rgb(108, 157, 223) rgb(108, 157, 223) rgb(52, 86, 132); border-width: 1px; font-size: 12px; font-weight: bold;"> 
     Map 
    </div> 
</div> 

tasto Inattivo:

<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 5.1em;" title="Show imagery with street names"> 
    <div style="border-style: solid; border-color: white rgb(176, 176, 176) rgb(176, 176, 176) white; border-width: 1px; font-size: 12px;"> 
     Hybrid 
    </div> 
</div> 

---

UPDATE: C'è anche un'estensione in Google Maps Utility Biblioteca che può raggiungere questo obiettivo - ExtMapTypeControl

Answer 3

Ho anche avuto lo stesso problema, è così che l'ho fatto, Crea TE un pulsante e dare lo stile sotto

id = "my_button"

#my_button{ 
      position:absolute; 
      bottom:2%; 
      color: #fff; 
      background-color: #4d90fe; 
      padding: 11px; 

      border: 1px solid transparent; 
      border-radius: 2px; 
      box-sizing: border-box; 
      -moz-box-sizing: border-box; 

      outline: none; 
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
      alignment-baseline:central; 
      width:90%; 
      left:5%; 
      text-align:center; 
      text-decoration:none; 


      margin:0px auto;} 


     #my_button:hover{ 
      background-color:#3B6EC2;} 

Answer 4

La risposta accettata è dal 2009 (5 anni fa) e link a una versione deprecata di Google Maps API.

Durante la ricerca per la stessa domanda che ho trovato questo esempio: https://developers.google.com/maps/documentation/javascript/examples/control-custom

// 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); 

homeControlDiv.index = 1; 
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv); 

Answer 5

utilizzando jQuery sembra che questo: prima, creare una funzione, che restituirà il vostro elemento

function myButton(){ 
    var btn = $('<div class="my-button"></div>'); 
    btn.bind('click', function(){ 
     // logic here... 
     alert('button clicked!'); 
    }); 
    return btn[0]; 
} 

e dopo mappa è stato creato è necessario collegare il pulsante ad esso:

map.controls[google.maps.ControlPosition.TOP_CENTER].push(myButton());