I have this assignment at work in which I need to use the Google maps API v3 and the design they gave me was without the logo/footer/copyright that google puts in the inferior part of the map. Well, I need to have it disabled or hidden because I was told that I need to match the exact design no matter what.

I had to emphasize that by doing this I breach the terms of use of Google service...

9.4 Attribution.

(a) Content provided to you through the Service may contain the trade names, trademarks, service marks, logos, domain names, and other distinctive brand features of Google, its partners, or other third party rights holders of content indexed by Google. When Google provides this attribution, you must display it as provided through the Service or as described in the Maps APIs Documentation and may not delete or in any manner alter these trade names, trademarks, service marks, logos, domain names, and other distinctive brand features.

Well at my work they didn't care about that and they always told me to do it anyway so these is how I'm doing it.

In the css I added the following lines of code:

#map-report div.gmnoprint,
#map-report div.gmnoscreen {
    display: none;      
}

img[src=".png"] {
    display: none; 
}

I have this assignment at work in which I need to use the Google maps API v3 and the design they gave me was without the logo/footer/copyright that google puts in the inferior part of the map. Well, I need to have it disabled or hidden because I was told that I need to match the exact design no matter what.

I had to emphasize that by doing this I breach the terms of use of Google service...

9.4 Attribution.

(a) Content provided to you through the Service may contain the trade names, trademarks, service marks, logos, domain names, and other distinctive brand features of Google, its partners, or other third party rights holders of content indexed by Google. When Google provides this attribution, you must display it as provided through the Service or as described in the Maps APIs Documentation and may not delete or in any manner alter these trade names, trademarks, service marks, logos, domain names, and other distinctive brand features. https://developers.google.com/maps/terms

Well at my work they didn't care about that and they always told me to do it anyway so these is how I'm doing it.

In the css I added the following lines of code:

#map-report div.gmnoprint,
#map-report div.gmnoscreen {
    display: none;      
}

img[src="http://maps.gstatic.com/mapfiles/google_white.png"] {
    display: none; 
}

• javascript
• html
• css
• google-maps

• 6 per google api terms of use, you can't remove any of that stuff. if you do and they find out, at the very least they will ban your site/software from using there api. but they could do worse involving copyright claims. Although Im sure you can remove them after they are loaded into the DOM for those hard headed enough to try. I wouldn't advice it – chris Commented Sep 19, 2012 at 17:33
• 3 You could use OpenLayers instead? – barro32 Commented Sep 19, 2012 at 17:34
• 3 Im going to agree with @josh3736 maybe its time for a new job, lets say hypothetically google goes after your company. Whats to say the boss man doesn't stick it to you, and you somehow end up having to suffer the consequences. – chris Commented Sep 19, 2012 at 17:40
• 2 Tell the designer to add the copyright in the design. – user1752532 Commented Dec 31, 2013 at 8:30
• 1 At least a smart move to leave something here to have prove you did not want to do that in the first place... :) – Ole Albers Commented Mar 8, 2016 at 20:13

19 Answers 19

This CSS works like charm [October 2019 tested].
Removes Google Logo, terms of use, and Report a problem div.

a[href^="http://maps.google.com/maps"]{display:none !important}
a[href^="https://maps.google.com/maps"]{display:none !important}

.gmnoprint a, .gmnoprint span, .gm-style-cc {
    display:none;
}
.gmnoprint div {
    background:none !important;
}

Try this for api v3:

.gm-style-cc { display:none; }

Jan 2018 update. Leaves only clean map:

a[href^="http://maps.google.com/maps"],
a[href^="https://maps.google.com/maps"],
a[href^="https://www.google.com/maps"] {
    display: none !important;
}
.gm-bundled-control .gmnoprint {
    display: block;
}
.gmnoprint:not(.gm-bundled-control) {
    display: none;
}

As of Feb 2018 the CSS above makes markers on the map unclickabe. If you don't have any markers you shoudn't have any problems, but if you do just remove the last CSS rule .gmnoprint:not(.gm-bundled-control), the markers will become clickable but there will be some little copyright and terms of use labels

As you mentioned, removing the Google logo and copyright notices is not compliant with the Google Maps APIs TOS, specifically with paragraph 9.4:

"Content provided to you through the Service may contain the Brand Features of Google, its strategic partners, or other third-party rights holders of content that Google indexes. When Google provides those Brand Features or other attribution through the Service, you must display such attribution as provided (or as described in the Maps APIs Documentation) and must not delete or alter the attribution.".

To be compliant with Terms of Service please always make sure the Google logo and copyright notices are visible.

Works like a charm with v3:

.gm-style-cc {
  display: none !important;
}

.gm-style a[href^="https://maps.google.com/maps"] {
  display: none !important;
}

Take a note for 2nd selector I use .gm-style before a because otherwise it will hide all links to https://maps.google.com/maps not only from google map itself.

You can't remove it from API. But you can use a div which you can place on the copyright notice

<div style="width:100px; height:15px; position:absolute; margin-left:100px margin-

bottom:50px; background-color:white;">
</div>

do the changes to height,width and margins according to need.

You can do this:

#map-report a img { display:none; } 

You can prevent the click on google copyright.so, that it will not let user to move out of your applicaiton.Hope this resolves your problem.

google.maps.event.addListenerOnce(map, 'idle', function(){
    // do something only the first time the map is loaded
    //@mapCopyright - gets the google copyright tags
    var mapCopyright=document.getElementById('map-canvas').getElementsByTagName("a");   
        $(mapCopyright).click(function(){
            return false;
        });
    });

First put your maps in a container :

<div id="map">
    <div class="google-maps"></div>
</div>

CSS:

#map {
    position: relative;
    height: 500px;
    overflow: hidden; //important
}
#map .google-maps {
    position: absolute;
    width: 100%;
    height: 110%;  //that will do the trick
    left: 0;
    top: 0;
}

a[href^="http://maps.google.com/maps"],a[href^="https://maps.google.com/maps"] {
     display: none !important;
}
.gmnoprint a,.gmnoprint span,.gm-style-cc { 
    display: none;
}

use this code(css)

a[href^="http://maps.google.com/maps"]{display:none !important}

this:

#map-repor > div { 
  height: 105% !important;
}

is enough in my case

Google map Version 3:

Hide google logo:

a[href^="http://maps.google.com/maps"],
a[href^="https://maps.google.com/maps"],
a[href^="https://www.google.com/maps"],

Hide terms:

.gm-style-cc { 
    display:none !important
}

This will do the trick.

$('#map span:contains("©")')
    .closest('.gmnoprint')
    .css('opacity', '0')

Improving on another solution here, this just disables the links in the map, so people don't leave the app (and get stuck without a way to go back). On an app it makes a big difference when people try to scroll a small map and tap by mistake.

  google.maps.event.addListenerOnce(map, 'idle', function(){

      $("#map a").click(function(){
          return false;
      });
  });

This works for now, at least until they modify the title attribute for the link around the logo.

.gm-style a[title='Click to see this area on Google Maps']{ display: none!important; }

.gm-style > div:first-child {
z-index: 10000000 !important;
}

z-index: 1000000 is added by js for all divs, but we want see only map, so we must set z-index to 10000000

One-liners working with V3

CSS

#map .gm-style > div:not(:first-child) { display: none; }

jQuery

$('#map .gm-style > div:not(:first-child)').remove()

  .gm-style-mtc,
  .gm-svpc,
  .gm-style-cc {
    display: none;
  }

i think you should add a wrapper block to change new style! and with Google logo on the left footer. you can use inspect element to get ours selector same here.

#example-map > div > div > div:nth-child(3) {
  display: none;
}