0

I've succeeded in moving all other controls on a Google map with the following small screen css:

div.gmnoprint, div.gmnoprint:nth-child(8) > div:nth-child(2) > div:nth-child(4) > img:nth-child(1) {
  padding-top: 130px;
}

This is needed to move the map controls below a logo on a mobile/small screen version of a site. The pan, zoom and map type controls all move correctly but the Peg Man stays in its original position which is behind the site logo (which I can't move easily).

The element identifier used in the above css is what the Firefox inspector claims is the Peg Man image but I've also tried removing weekend from the end of that identifier to modify the div tags rather than the image - the Peg Man just won't move!

You can see the problem at http://www.BlueBadgeParking.com on device with a screen size of less than 400px.

1 Answer 1

1

You will have to use margin-top instead of padding-top for pegMan as the height of the div containing Pegman is 0.

#map-canvas > div > div:nth-child(8) > div:nth-child(2){
margin-top: 19px;
}

Tested On Your Site.

5
  • Seems to kind of work on the desktop if I shrink the window size (but oddly the zoom slider ends up out of place). However on Android the Peg Man is still in its original position...
    – Fat Monk
    May 1, 2014 at 11:06
  • 2
    i think better way would be changing the controls position using the API itself. Here is the link to it
    – Neil
    May 1, 2014 at 11:21
  • I didn't realise the positioning was quite so flexible! I think I've found something that works now. Thanks.
    – Fat Monk
    May 1, 2014 at 12:02
  • I've basically moved the pan control and zoom control (which includes the PegMan) to RIGHT_CENTER which avoid my other UI elements, and the map type selector to BOTTOM_CENTER. Just a shame it can't be done in css to take advantage of screen size and orientation switches as I could make things close to perfect then
    – Fat Monk
    May 1, 2014 at 12:52
  • I've actually ditched the inbuilt controls now and added my own buttons that set the map's mapTypeId via JavaScript - can fully control their position that way.
    – Fat Monk
    May 2, 2014 at 8:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.