Custom Position Non Custom Control Google Maps (v3

Question

I would like to be able to adjust the position of the map type control. I have it set to top right however I need to drop it by about 50 pixels. I read on custom controls you can pad the DIV, what about non custom controls? Can I extend the control?

Below is the HTML generated by the API for the control:

<div class="gmnoprint" style="margin: 5px; z-index: 11; position: absolute; cursor: pointer; text-align: left; top: 0px; right: 0px;">
<div style="width: 80px; position: relative; overflow: hidden; border: 1px solid black;">
    <div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 0px 5px; font-weight: bold; border-width: 1px; border-style: solid; border-color: rgb(112, 112, 112) rgb(208, 208, 208) rgb(208, 208, 208) rgb(112, 112, 112);" title="Change map style">Map<img style="position: absolute; right: 4px; top: 4px; display: block;" src="http://maps.gstatic.com/intl/en_us/mapfiles/down-arrow.gif"></div>
</div>
<div style="border: 1px solid black; width: 80px; display: none;">
    <div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 1px 5px;" title="Show street map">Map</div>
    <div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 1px 5px;" title="Show satellite imagery">Satellite</div>
    <div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 1px 5px;" title="Show imagery with street names">Hybrid</div>
    <div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 1px 5px;" title="Show street map with terrain">Terrain</div>
</div></div>

As an interim solution I am using the following jquery code to alter the padding of this specific control:

$('[title="Change map style"]').parent().css('padding-top', '36px');

Far from ideal, but does the job in this case :/

Answer 1

Seems like you should be able to move this using some CSS (and maybe some JS). I visited http://maps.google.com and it looks like these controls have an ID ('lmc3d' in my case) and are positioned absolutely. Have you tried something like this in your style sheet:

#lmc3d{
    top: 50px;   /* adjust these two to move */
    left: 50px;
}

Answer 2

We hacked this. With the help of jQuery we label elements with a class or id based on their custom style elements when the map is first created. This allows us to do stuff like ('.zoom_controls').css('top', '50px') to move the zoom controls down.

It's a hack that could break at any time but it works for us at v3.4. We'll revisit when it becomes an issue. I don't know why Google just don't put IDs in there.

• Classes: https://gist.github.com/887917
  
• IDs: https://gist.github.com/887918

Answer 3

One way to do it would be with JQuery, like Mat.E said over there, but instead of searching the Control by specific css style, an easy way would be to search the element with a class gmnoprint which has a child div containing the text 'Map' (which is the MapTypeControl that you're looking for)

$('.gmnoprint>div>div:contains("Map")').parent().parent().css('margin-left','35px');

Answer 4

You can do it with CSS only. Padding top only example:

#your_map_id_container .gm-style .gmnoprint{
  margin-top: 100px! important;
}

#your_map_id_container .gm-style .gmnoprint .gmnoprint{
  margin-top: 0px !important;
}