Search code examples
javascriptcssgoogle-mapsjquery-ui-map

can you customize a Google Maps display


sample image

Ignore the Hide|Show bar in the upper right hand corner. It was present in the image I screen grabbed for this example.

Google adds the following:

  • Google icon on the bottom left corner.
  • Text on the bottom right corner.
  • The little yellow man icon, + and - at the bottom of the right hand margin.
  • The zoom icon at the top right corner.

Is it possible to hide any or all of these programmatically?


Solution

  • Your not really supposed to hide or remove the logo + copyright info but you can remove the controls by using disableDefaultUI: true.

    Example:

    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: {lat: -33, lng: 151},
        disableDefaultUI: true
      });
    }
    

    More info can be found here: https://developers.google.com/maps/documentation/javascript/controls