Google Maps affiche "À des fins de développement uniquement"


155

Google Maps affiche le message "À des fins de développement uniquement" lorsque j'essaie de l'afficher sur ma page Web:

entrez la description de l'image ici

Comment pourrais-je faire disparaître ce message?

Mon code est comme ça:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
  function initialize() {  
    var myLatlng = new google.maps.LatLng(50.5792659,8.6744471);
    var centerMap = new google.maps.LatLng(50.5792659,8.6744471);
    var div = document.getElementById('map');
  }
</script>

Puis plus tard j'ai

<p>
  <a
    href="https://www.google.com/maps/dir//50.5792659,8.6744471/@50.579266,8.674447,16z"
    target="_blank"
  >Route berechnen</a>
</p>

Je ne vois pas d'où vient ce message.


6
Je sais que cette question a déjà reçu une réponse, mais au cas où vous ne le sauriez pas, il existe un outil appelé Google Maps Platform API Checker pour Google Chrome qui vous permet de déboguer votre intégration Google Maps -> chrome.google.com/webstore/detail/ google-maps-platform-api /…
Dayron Gallardo

Réponses:


192

Google Maps n'est plus gratuit. Vous devez associer une carte de crédit afin de pouvoir être facturé si votre site a des demandes qui dépassent le crédit de 200 $ qu'il vous accorde gratuitement chaque mois. C'est pourquoi vous obtenez les cartes filigranées.

Pour plus d'informations, consultez: https://cloud.google.com/maps-platform/pricing/

Mise à jour: un problème courant avec le nouveau système de facturation est que vous devez désormais activer chaque API séparément. Ils ont tous des prix différents (certains sont même gratuits), donc Google met un point d'honneur à vous les activer individuellement pour votre domaine. Je n'ai jamais été un grand utilisateur de Google Maps, mais j'ai le sentiment qu'il y a beaucoup plus d'API maintenant qu'il n'y en avait auparavant.

Donc, si vous recevez toujours un message d'utilisation restreinte après avoir activé la facturation, découvrez de quelle API vous avez exactement besoin pour les fonctionnalités que vous souhaitez offrir et vérifiez si elle est activée. Les paramètres de l'API sont extrêmement difficiles à trouver.

  1. Accédez à ce lien: https://console.developers.google.com/apis/dashboard .
  2. Ensuite, vous sélectionnez votre projet dans la liste déroulante.
  3. Accédez à la bibliothèque dans le volet gauche.
  4. Parcourez les API disponibles et activez celle dont vous avez besoin.

2
La tarification sur la carte charge les --> développeurs.google.com
maps

merci beaucoup, vous sauvez ma journée. Et pour info, pour la première fois en associant votre compte avec google, vous obtiendrez 300 $ gratuits.
majorl3oat

1
Cela prend-il quelques jours pour entrer en vigueur? Je l'ai fait il y a quelques jours, mais je reçois toujours le message sur mes cartes. Même cliquez et assurez-vous que j'ai accepté tous les accords ..... Je vois où le trafic arrive sur le tableau de bord
DigitalMystery

Non, cela ne prend généralement pas longtemps. Mon expérience est de quelques minutes. Mais vous devrez peut-être activer différentes API pour que les choses fonctionnent. Quel message d'erreur obtenez-vous, @DigitalMystery?
Victoria Ruiz le

C'est sur mon application mobile. Au début, c'est la fenêtre contextuelle "Cette page ne peut pas charger correctement Google Maps." Cliquez sur OK et la carte affiche le message ci-dessus. J'utilise aussi ma clé ..... @VictoriaRuiz
DigitalMystery

36

Filigrane avec  " à des fins de développement uniquement " est renvoyé lorsque l'une des conditions suivantes est vraie:

  1. Il manque une clé API dans la requête.
  2. La facturation n'a pas été activée sur votre compte.
  3. La méthode de facturation fournie n'est pas valide (par exemple, une carte de crédit expirée).
  4. Une limite quotidienne auto-imposée a été dépassée.

29

Comme Victoria l'a écrit, Google Maps n'est plus gratuit, mais vous pouvez changer de fournisseur de carte. Vous pouvez être intéressé par OpenStreetMap, il existe un moyen simple de l'utiliser sur votre site décrit ici: https://handyman.dulare.com/switching-from-google-maps-to-openstreetmap/

Malheureusement, sur OpenStreetMap, il n'y a pas de moyen facile de fournir des directions d'un point à un autre, il n'y a pas non plus de vue de la rue.


Comment faire cela en utilisant Angular 6?
Kalyanam Rajashree

1
J'ai ajouté le plan de rue ouvert à partir de ce lien vers un jsfiddle: jsfiddle.net/nLj1uaqc
Andrew


7

Comme recommandé dans un commentaire, j'ai utilisé le " Vérificateur d'API Google Maps Platform complément Chrome " pour identifier et résoudre le problème.

Essentiellement, ce complément m'a dirigé vers ici endroit où j'ai pu me connecter à Google et créer une clé API gratuite.

Ensuite, j'ai mis à jour mon JavaScript et cela a immédiatement résolu ce problème.

Ancien JavaScript: ... script src = "https://maps.googleapis.com/maps/api/js?v=3" ...

Javascript mis à jour: ... script src = "https://maps.googleapis.com/maps/api/js?key=***** CLÉ D'APIGOOGLE ****** & v = 3" ...

Le complément a ensuite validé l'appel d'API JS. J'espère que cela aidera quelqu'un à résoudre le problème rapidement!

entrez la description de l'image ici


3

Désormais, google maps est gratuit pour le développement uniquement.

Si vous souhaitez utiliser la carte gratuitement comme précédemment, créez un compte avec des détails valides (facturation, paiement, etc.) google donne 200 $ DE CRÉDIT MENSUEL, ÉQUIVALENT À UNE UTILISATION GRATUITE

Pour plus de détails, veuillez consulter les nouveaux détails des prix de Google : nouvelle tarification de google map

Voir également les anciens détails de prix: Ancien


2

Si votre mapTypeId est SATELLITEouHYBRID

eh bien, c'est juste un filigrane, vous pouvez le cacher si vous changez celui <div>que z-index=100 j'ai utilisé

setInterval(function(){
    $("*").each(function() {
        if ($(this).css("zIndex") == 100) {
            $(this).css("zIndex", "-100");
        }
    })}
, 10);

ou vous pouvez utiliser

map.addListener('idle', function(e) {
    //same function
}

mais ce n'est pas aussi réactif que setInterval


qu'entendez-vous par «réactif»?
Artem Bernatskyi

plus rapide, mais pas plus efficace
blesafho

Si ces méthodes ont fonctionné une fois, elles n'apparaissent toujours pas. On dirait qu'ils déclenchent des boucles infinies alors que Google ne fait que basculer ce que vous avez fait.
Nosajimiki

Cette méthode ne fonctionnera pas car Google utilise un ensemble d'images différent, avec un filigrane placé directement sur la vignette de la carte, par exemple: maps.googleapis.com/maps/…
syntagma

1

Si vous voulez une carte de localisation simple gratuite montrant un seul emplacement marqué, pour votre site Web, alors

  • Accédez à AddMap .
  • Ici, vous pouvez remplir les détails pour personnaliser entièrement votre carte, comme les détails de l'emplacement, le dimensionnement et le formatage de la carte.
  • Enfin, pour ajouter la clé api google map, générez-la en utilisant cette méthode .

Faites-moi savoir si cela peut vous aider.


0

Il me semble que lorsqu'il affiche le "À des fins de développement uniquement", on ne peut pas non plus voir les configurations de la carte pendant le développement (ou plutôt jouer avec les configurations). Dans mon cas, je n'ai pas activé la facturation pour être associée à l'API que j'utilise et je pense que c'est la raison pour laquelle elle se comporte de cette façon.


0

Pour moi, l'erreur a été corrigée lors de l'activation de la facturation dans la console Google. (J'ai eu un essai de développeur d'un an)


-5

Vous ne pouvez pas utiliser la balise iframe en HTML, voici ce que vous pouvez faire:
* il vous suffit d'aller dans google maps pour indiquer votre emplacement
* de cliquer sur "Partager"
* d'aller dans "Intégrer une carte"
* de copier le code HTML
* de le coller dans votre Page HTML
* ajustez la hauteur et la largeur en fonction de vos besoins
* exécutez-la

Cela pourrait fonctionner

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.