[google-maps] Google Maps shows "For development purposes only"

Google Maps show the message "For development purposes only" when I try to show it in my webpage:

enter image description here

How could I make this message go away?

My code is like that:

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

Then later I have

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

I don't see where this message originates from.

This question is related to google-maps google-maps-api-3

The answer is


If your mapTypeId is SATELLITE or HYBRID

well, it is just a watermark, you can hide it if you change the <div> that has z-index=100 I use

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

or you can use

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

but it is not as responsive as setInterval


try this code it doesn't show “For development purposes only”

<iframe src="http://maps.google.com/maps?q=25.3076008,51.4803216&z=16&output=embed" height="450" width="600"></iframe>

You can't use iframe tag in HTML, here's what you can do:
* just go into google maps point out your location
* click on "Share"
* go to "Embed a map"
* copy the HTML code
* paste it in your HTML page
* adjust height and width according to your requirement
* run it

This might work


As Victoria wrote, Google Maps is no longer free, but you can switch your map provider. You may be interested in OpenStreetMap, there is an easy way to use it on your site described here: https://handyman.dulare.com/switching-from-google-maps-to-openstreetmap/

Unfortunately, on the OpenStreetMap, there is no easy way to provide directions from one point to another, there is also no street view.


If you want a free simple location map showing a single marked location, for your website, Then

  • Go to AddMap.
  • Here you can fill details to fully customize your map like location details, sizing and formatting of map.
  • Finally to add google map api key, Generate it using this method.

Let me know If this would help..


For my purposes I ended up using an alternative https://www.openstreetmap.org/ .


As recommended in a comment, I used the "Google Maps Platform API Checker" Chrome add-in to identify and resolve the issue.

Essentially, this add-in directed me to here where I was able to sign in to Google and create a free API key.

Afterwards, I updated my JavaScript and it immediately resolved this issue.

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

Updated Javascript:...script src="https://maps.googleapis.com/maps/api/js?key=*****GOOGLE API KEY******&v=3" ...

The add-in then validated the JS API call. Hope this helps someone resolve the issue quickly!

enter image description here


Now google maps is free for development only.

If you want to use map free like earlier, then create an account with valid details (billing, payment, etc.) google gives $200 MONTHLY CREDIT Which is EQUIVALENT To FREE USAGE

For more details please see Googles new price details: google map new pricing

Also see the old price details: Old one


It seems to me that when it displays the "For development purposes only", one cannot see the map configurations as well while developing(or rather playing around with the configurations). In my case I have not enabled billing to be associated with the API I am using and I am thinking that's the reason why its behaving this way.


For me, Error has been fixed when activated Billing in google console. (I got 1-year developer trial)


Watermarked with ?“for development purposes only” is returned when any of the following is true:

  1. The request is missing an API key.
  2. Billing has not been enabled on your account.
  3. The provided billing method is invalid (for example an expired credit card).
  4. A self-imposed daily limit has been exceeded.