web-dev-qa-db-ja.com

GoogleマップJavaScript API v3のGoogleロゴ、フッター、著作権を非表示または無効にする方法

GoogleマップAPI v3を使用する必要がある仕事でこの割り当てがあり、彼らがくれたデザインには、Googleがマップの下位部分に配置するロゴ/フッター/著作権がありませんでした。まあ、私はそれを無効にするか非表示にする必要があります。なぜなら、私は何があっても正確な設計に一致させる必要があると言われたからです。

これを行うことで、Googleサービスの利用規約に違反することを強調しなければなりませんでした...

9.4帰属

（a）本サービスを通じてお客様に提供されるコンテンツには、Google、そのパートナー、またはGoogleによってインデックス化されたコンテンツのその他の第三者の権利所有者の商号、商標、サービスマーク、ロゴ、ドメイン名、およびその他の特徴的なブランドが含まれる場合があります。 Googleがこの帰属を提供する場合、サービスを通じて提供されるか、Maps APIドキュメントに記載されているとおりに表示する必要があり、これらの商号、商標、サービスマーク、ロゴ、ドメイン名、およびその他の独特なブランドを削除または変更することはできません特徴。 https://developers.google.com/maps/terms

私の仕事では、彼らはそれを気にしませんでしたし、とにかくそれをするようにいつも言っていたので、これらは私がそれをやっている方法です。

CSSに次のコード行を追加しました。

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

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

このCSSは魅力のように機能します[2019年8月テスト済み]。
削除Googleロゴ、使用条件、および問題の報告 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;
}
112
Abhishek Goel

API v3でこれを試してください：

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

19
Luis A. Florit

2018年1月の更新。クリーンなマップのみを残します：

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

2018年2月現在、上記のCSSは地図上のマーカーをunclickabeにします。マーカーがない場合は問題ありませんが、最後のCSSルール.gmnoprint:not(.gm-bundled-control)を削除するだけでマーカーはクリック可能になりますが、著作権と利用規約が少しありますラベル

13
Quinn Daley

前述のとおり、Googleロゴと著作権表示の削除は、 Google Maps API TOS、特に9.4項に準拠していません：

」サービスを通じて提供されるコンテンツには、Google、その戦略的パートナー、またはGoogleがインデックス化するコンテンツのその他の第三者の権利所有者のブランドが含まれる場合があります。サービスでは、提供された（またはMaps APIドキュメントに記載されている）属性を表示する必要があり、属性を削除または変更しないでください。」。

利用規約に準拠するには、Googleロゴと著作権表示が常に表示されるようにしてください。

6
kaskader

APIから削除することはできません。ただし、著作権表示に配置できるdivを使用できます

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

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

必要に応じて、高さ、幅、余白を変更します。

5
عثمان غني

あなたはこれを行うことができます：

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

Google copyright.soのクリックを防ぐことができます。これにより、ユーザーがアプリケーションから移動できなくなります。これで問題が解決することを願っています。

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

最初にマップをコンテナに入れます：

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

このコード（css）を使用してください

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

ここで別の解決策を改善すると、これはマップ内のリンクを無効にするだけなので、ユーザーはアプリを離れることはありません（そして戻る方法がなくて立ち往生します）。アプリでは、人々が小さな地図をスクロールして誤ってタップしようとすると大きな違いが生じます。

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

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

この：

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

私の場合は十分です

1
Picard

少なくともロゴの周りのリンクのタイトル属性を変更するまで、これは今のところ機能します。

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

これはトリックを行います。

$('#map span:contains("©")')
    .closest('.gmnoprint')
    .css('opacity', '0')
0
Andrzej Winnicki
  .gm-style-mtc,
  .gm-svpc,
  .gm-style-cc {
    display: none;
  }

新しいスタイルを変更するには、ラッパーブロックを追加する必要があると思います！左側のフッターにGoogleロゴがあります。 inspect要素を使用して、ここでセレクタを取得できます。

#example-map > div > div > div:nth-child(3) {
  display: none;
}
0
Đức Tuyên Vũ

V3を使用するワンライナー

CSS

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

jQuery

$('#map .gm-style > div:not(:first-child)').remove()
0
user1025495
.gm-style > div:first-child {
z-index: 10000000 !important;
}

z-index：すべてのdivに対してjsによって1000000が追加されますが、マップのみを表示するため、z-indexを10000000に設定する必要があります

0
adamrosloniec