How to hide or disable the google logo, footer, copyright on google maps JavaScript API v3?

Question

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

Solution 1

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

Solution 2

Try this for api v3:

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

Solution 3

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

Solution 4

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.

Solution 5

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.

View more solutions