Poner un botón en la parte superior de un mapa de Google

Question

Me gustaría poner un botón en la parte superior de un mapa de Google al lado del mapa, satélite e híbridos botones.

Me preguntaba si su posible y cómo sería la mejor manera de hacerlo?

Así que las ideas que tengo son la superposición de una imagen en la parte superior del mapa de Google que se puede hacer clic, pero no estoy seguro si eso va a tomar todos los eventos fuera del mapa de Google.

¿Tiene alguna idea sobre cómo se podría hacer?

Answer 1

Hay una muy buena descripción de cómo hacer esto aquí .

Estoy bastante seguro de que puede estilo de estos chicos para parecerse a los botones estándar y definitivamente se puede anclar a la parte superior derecha. Cuando tengo la oportunidad voy a darle una oportunidad y actualización con mis resultados.

Actualización:

he tenido la oportunidad de probar esto y funciona bien:

• ejemplo Correspondencia con los botones de estilo de Google
• Javascript Fuente

Básicamente que terminan haciendo cosas muy similares de ejecución de los botones usando GControl o simplemente utilizando la posición absoluta de un DIV sobre el mapa (como ChrisB sugerido). Así que no creo que haya un enfoque correcto (o más fácil), que es sólo una cuestión de preferencia personal. Buena suerte.

Answer 2

La respuesta aceptada es a partir de 2009 (hace 5 años) y enlaces a una versión obsoleta del API de Google Maps.

En la búsqueda de la misma pregunta que he encontrado este ejemplo: 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 3

Sólo para complementar la respuesta de Cañoneo, aquí está el código HTML / CSS que un mapa de Google usos de control. Puede reproducir el css para que se vea como la cosa real.

Se puede crear un GControl formal, o usted podría colocarlos sobre el mapa de Google con el posicionamiento absoluto.

botón activa:

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

botón Inactivo:

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

---

ACTUALIZACIÓN: Hay también una extensión de la biblioteca de utilidades de Google Maps que se pueden lograr esto - ExtMapTypeControl

Answer 4

También tuve el mismo problema, esto es cómo lo hice, Crear un botón y darle el estilo de abajo

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 5

usando jQuery que tiene este aspecto: En primer lugar, crear una función, que devolverá el elemento

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

y después de mapa fue creado que es necesario conectar el botón para que:

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