Put a button on top of a google map

Question

Hi,

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?

Regards

Mark

Answer 1

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 2

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