web-dev-qa-db-fra.com

Comment masquer ou désactiver le logo Google, le pied de page, le droit d'auteur sur Google Maps JavaScript API v3?

J'ai au travail cette tâche au cours de laquelle je dois utiliser l'API Google Maps v3 et le design qu'ils m'ont donné était sans le logo/pied de page/copyright que Google place dans la partie inférieure de la carte. Eh bien, je dois le désactiver ou le masquer, car on m'a dit que je devais faire correspondre le design exact, peu importe quoi.

Je devais souligner que, ce faisant, je ne respectais pas les conditions d'utilisation du service Google ...

9.4 Attribution. 

(a) Le contenu qui vous est fourni par le biais du Service peut contenir les noms commerciaux, marques commerciales, marques de service, logos, noms de domaine et autres caractéristiques distinctives de Google, de ses partenaires ou de tiers détenteurs des droits d'un contenu indexé par Google. Lorsque Google attribue cette attribution, vous devez l'afficher telle que fournie par le service ou telle que décrite dans la documentation de Maps APIs et ne pas supprimer ni modifier de quelque manière que ce soit ces noms commerciaux, marques commerciales, marques de service, logos, noms de domaine et autres marques distinctives fonctionnalités. https://developers.google.com/maps/terms

Eh bien, dans mon travail, ils ne se souciaient pas de ça et ils me disaient toujours de le faire quand même, alors voici comment je le fais.

Dans le css, j'ai ajouté les lignes de code suivantes:

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

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

Ce CSS fonctionne à merveille [testé en mars 2018]. 
Supprime Logo Google , conditions d'utilisation et Signaler un problème 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;
}
105
Abhishek Goel

Essayez ceci pour api v3:

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

19
Luis A. Florit

Mise à jour de janvier 2018 . Ne laisse que la carte propre:

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

À partir de février 2018, le CSS ci-dessus rend les marqueurs sur la carte inviolables . Si vous n'avez pas de marqueur, vous ne devriez pas rencontrer de problème, mais si vous supprimez simplement la dernière règle CSS .gmnoprint:not(.gm-bundled-control), les marqueurs deviendront cliquables, mais il y aura quelques étiquettes de copyright et de conditions d'utilisation

11
Quinn Daley

Comme vous l'avez mentionné, la suppression du logo Google et des mentions de copyright n'est pas compatible avec les conditions d'utilisation des API Google Maps, en particulier avec le paragraphe 9.4: 

"Le contenu qui vous est fourni par le biais du Service peut contenir les caractéristiques de la marque de Google, de ses partenaires stratégiques ou d'autres détenteurs de droits tiers du contenu indexé par Google. affiche l'attribution telle qu'elle est fournie (ou telle que décrite dans la documentation de Maps API) et ne doit ni supprimer ni modifier l'attribution. " 

Pour être conforme aux conditions d'utilisation, assurez-vous toujours que le logo Google et les avis de copyright sont visibles.

6
kaskader

Vous ne pouvez pas le supprimer de l'API. Mais vous pouvez utiliser un div que vous pouvez placer sur la notice de copyright

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

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

modifiez la hauteur, la largeur et les marges en fonction des besoins.

5
عثمان غني

Fonctionne comme un charme avec v3:

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

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

Prenez une note pour le 2e sélecteur. J'utilise .gm-style avant a car sinon, il cachera all des liens vers https://maps.google.com/maps et pas seulement dans Google Map.

5
Lukas

Tu peux le faire: 

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

Vous pouvez empêcher le clic sur google copyright.so de ne pas laisser l’utilisateur se déplacer hors de votre application.

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

Commencez par placer vos cartes dans un conteneur:

<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

utiliser ce code (css)

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

En améliorant une autre solution ici, cela désactive simplement les liens sur la carte, afin que les gens ne quittent pas l'application (et restent bloqués sans possibilité de retour). Sur une application, le fait de faire défiler une petite carte et de cliquer par erreur fait toute la différence.

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

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

ce:

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

est suffisant dans mon cas

1
Picard

Cela fonctionne pour le moment, du moins jusqu'à ce qu'ils modifient l'attribut title du lien autour du logo.

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

Ça fera l'affaire.

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

One-liners travaillant avec 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: 1000000 est ajouté par js pour tous les divs, mais nous ne voulons voir que la carte, nous devons donc définir z-index sur 10000000

0
adamrosloniec