Custom Position Non Custom Control Google Maps (v3 API)

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 ca

Answer 1

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

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

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