google-maps - simbologia - que significan los colores en google maps

Pon 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 de los botones Mapa, Satélite e Híbrido.

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

Entonces, las ideas que tengo son superponer una imagen en la parte superior del mapa de google en la que se puede hacer clic, pero no estoy seguro si eso quitará todos los eventos del mapa de Google.

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

Answer 1

Solo para complementar la respuesta de Cannonade, aquí está el html / css que usa un control Google Map. Puede replicar el CSS para que se vea como algo real.

Podría crear un GControl formal, o podría simplemente colocarlos sobre el Mapa de Google con un posicionamiento absoluto.

Botón activo:

<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: También hay una extensión en la biblioteca de herramientas de Google Maps que puede lograr esto: ExtMapTypeControl

Answer 2

También tuve el mismo problema, así es como lo hice, crear un botón y darle el diseño de abajo

id = "mi_botón"

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

La respuesta aceptada es de 2009 (hace 5 años) y los enlaces a una versión en desuso de la API de Google Maps.

Mientras buscaba la misma pregunta, encontré 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 4

usando jQuery se ve así: primero, crea una función, que devolverá tu 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 que se creó el mapa, debes adjuntar el botón:

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

Answer 5

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

Estoy bastante seguro de que puedes darles estilo a estos tipos para que se vean como los botones estándar y definitivamente puedes anclarlo en la parte superior derecha. Cuando tenga la oportunidad, lo probaré y actualizaré con mis resultados.

Actualizar:

Tuve la oportunidad de probar esto y funciona bien:

• Ejemplo de mapa con botones de estilo de Google
• Fuente de Javascript

Básicamente terminas haciendo cosas muy similares implementando los botones usando GControl o simplemente usando el posicionamiento absoluto de un DIV sobre el mapa (como sugirió ChrisB ). Entonces, no creo que haya un enfoque correcto (o más fácil), es solo una cuestión de preferencia personal. Buena suerte.