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

Javascript Problem Overview

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 Solutions

Solution 1 - Javascript

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 - Javascript

Try this for api v3:

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

Solution 3 - Javascript

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 - Javascript

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 - Javascript

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.

Solution 6 - Javascript

You can do this:

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

Solution 7 - Javascript

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.

Solution 8 - Javascript

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

Solution 9 - Javascript

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

Solution 10 - Javascript

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

Solution 11 - Javascript

use this code(css)

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

Solution 12 - Javascript

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

Solution 13 - Javascript

this:

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

is enough in my case

Solution 14 - Javascript

This will do the trick.

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

Solution 15 - Javascript

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

Solution 16 - Javascript

.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

Solution 17 - Javascript

One-liners working with V3

CSS

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

jQuery

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

Solution 18 - Javascript

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

Content Type	Original Author	Original Content on Stackoverflow
Question	mkhuete	View Question on Stackoverflow
Solution 1 - Javascript	Abhishek Goel	View Answer on Stackoverflow
Solution 2 - Javascript	Luis A. Florit	View Answer on Stackoverflow
Solution 3 - Javascript	Max Flex	View Answer on Stackoverflow
Solution 4 - Javascript	kaskader	View Answer on Stackoverflow
Solution 5 - Javascript	عثمان غني	View Answer on Stackoverflow
Solution 6 - Javascript	Guillaume	View Answer on Stackoverflow
Solution 7 - Javascript	Lukas Liesis	View Answer on Stackoverflow
Solution 8 - Javascript	Yuvaraj	View Answer on Stackoverflow
Solution 9 - Javascript	curved	View Answer on Stackoverflow
Solution 10 - Javascript	Prem Kumar	View Answer on Stackoverflow
Solution 11 - Javascript	Behnam Mohammadi	View Answer on Stackoverflow
Solution 12 - Javascript	eyal_katz	View Answer on Stackoverflow
Solution 13 - Javascript	Picard	View Answer on Stackoverflow
Solution 14 - Javascript	Andrzej Winnicki	View Answer on Stackoverflow
Solution 15 - Javascript	jdbosley	View Answer on Stackoverflow
Solution 16 - Javascript	adamrosloniec	View Answer on Stackoverflow
Solution 17 - Javascript	user1025495	View Answer on Stackoverflow
Solution 18 - Javascript	tuvudu	View Answer on Stackoverflow

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

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

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

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

Solution 5 - Javascript

Solution 6 - Javascript

Solution 7 - Javascript

Solution 8 - Javascript

Solution 9 - Javascript

Solution 10 - Javascript

Solution 11 - Javascript

Solution 12 - Javascript

Solution 13 - Javascript

Solution 14 - Javascript

Solution 15 - Javascript

Solution 16 - Javascript

Solution 17 - Javascript

One-liners working with V3

CSS

jQuery

Solution 18 - Javascript

Convert timestamp since epoch to datetime.datetime

iOS AutoLayout - get frame size width

Attributions

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

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

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

Solution 5 - Javascript

Solution 6 - Javascript

Solution 7 - Javascript

Solution 8 - Javascript

Solution 9 - Javascript

Solution 10 - Javascript

Solution 11 - Javascript

Solution 12 - Javascript

Solution 13 - Javascript

Solution 14 - Javascript

Solution 15 - Javascript

Solution 16 - Javascript

Solution 17 - Javascript

One-liners working with V3

CSS

jQuery

Solution 18 - Javascript

Convert timestamp since epoch to datetime.datetime

iOS AutoLayout - get frame size width

Attributions

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