Put a button on top of a google map

Question

I would like to put a button on top of a Google Map next to the Map, Satelite and Hybrid buttons.

I was wondering if its possible and how would be the best way to do it?

So ideas I have are overlaying a image on top of the google map that is clickable but not sure if that will take all the events away from the google map.

Do you have any ideas on how it could be done?

Answer 1

The accepted answer is from 2009 (5 years ago) and links to a deprecated version of Google Maps API.

While searching for the very same question I've found this example: 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 2

There is a pretty good description of how to do this here.

I am pretty sure you can style these guys to look like the standard buttons and you can definitely anchor it to the top right. When I get a chance I'll give it a try and update with my results.

Update:

I had a chance to try this out and it works ok:

• Map example with Google style buttons
• Javascript Source

Basically you end up doing very similar things implementing the buttons using GControl or just using absolute positioning of a DIV over the map (as ChrisB suggested). So I don't think there is a correct (or easier) approach, it's just a matter of personal preference. Good luck.

Answer 3

Just to supplement Cannonade's answer, here's the html/css that a Google Map control uses. You can replicate the css to make it look just like the real thing.

You could create a formal GControl, or you could just place them over the Google Map with absolute positioning.

Active button:

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

Inactive button:

<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: There is also an extension in the Google Maps Utility Library that can accomplish this - ExtMapTypeControl

Answer 4

I also had the same problem, this is how I did it, Create a button and give it the below styling

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

using jQuery it looks like this: first, create a function, that will return your element

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

and after map was created you need to attach your button to it:

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