Question

Im embedding a google map with the gmap3 jQuery plug in:
http://gmap3.net/index.html

How can I hide certain labels on the map?

By hiding .gmnoprint with CSS I can hide the controls but I still need to hide the Map/ Satellite option and the icon of a man thats top left.

For another view I need the controls to be visible so I cant hide gmnoprint. For this view I need to hide the 2 items mentioned above, and also the footer (which is visible if you dont hide .gmnoprint).

This project is an internal proof of concept only. If this goes to production we might use bing maps instead. For this reason I dont expect their to be any legal issues with what im trying to do.

Ive tried using CSS with different specifies but with surprising results, im guessing that google want to make it hard to hide things. Maybe I could run some JavaScript after the page is loaded to hide divs based on what content they have, but this seems quite a messy solution.

UPDATE With .gmnoprint:nth-child(3) I can hide the footer text (bottom right) but the ‘Google’ image bottom left div’s doenst have any classes or ids.

Answer 1

The “man” is the streetView-control, it may be removed as all other controls via the options defined inside the API-docs

$("#map")
  .gmap3({action: 'init',
          options:{
                    mapTypeControl:false,//hide mapTypeControl
                    streetViewControl: false//set it to false to hide the "man"
          }
});

disabling all controls:

$("#map")
  .gmap3({action: 'init',
          options:{
                    mapTypeControl:false,
                    streetViewControl: false,
                    panControl:false,
                    rotateControl:false,
                    zoomControl:false
                  }
});

Note: you are not allowed to remove the footer-text(also not the google-logo). It must always be visible, no matter what purposes the map is used for