Google Maps show the message "For development purposes only" when I try to show it in my webpage:
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.
Google Maps is no longer free. You have to associate a credit card so that you can get billed if your site has requests that exceed the $200 credit they give you monthly for free. That is why you get the watermarked maps.
For more information, see: https://cloud.google.com/maps-platform/pricing/
Update:
A common problem with the new billing system is that you now have to activate each API separately. They all have different pricing (some are even free), so Google makes a point of having you enable them individually for your domain.
I was never a heavy user of Google Maps, but I get the feeling that there are many more APIs now than there used to be.
So if you're still getting a restricted usage message after you've enabled billing, find out what API you need exactly for the features you want to offer, and check if it's enabled.
The API settings are annoyingly hard to find.
Go to this link:
https://console.developers.google.com/apis/dashboard.
Then you select your project in the dropdown.
Go to library on the left pane.
Browse the available APIs and enable the one you need.
Watermarked with “for development purposes only” is returned when any of the following is true:
The request is missing an API key.
Billing has not been enabled on your account.
The provided billing method is invalid (for example an expired credit card).
A self-imposed daily limit has been exceeded.
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.
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!
For my purposes I ended up using an alternative https://www.openstreetmap.org/ .
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
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>
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
For me, Error has been fixed when activated Billing in google console. (I got 1-year developer trial)
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.
I know this may not be related to the question, but i had the same issue on Vue. Even though i passed the API_KEY, i still had the same error. I tried #Mike Dubs suggestion, and it showed that i didn't pass API KEY(even though i did).
I used vue2-google-maps library, and on documentation on how to setup google library with API KEY, they said that on main.js i should do an import like this:
import * as VueGoogleMaps from 'vue2-google-maps';
But on my case that didn't work, but this did work:
import * as VueGoogleMaps from
'./../node_modules/vue2-google-maps/src/main';
Why, how, i don't know, but i think that vue somehow didn't understand the import.
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
I have code that used to work great which was taken directly from google developers tools. It is the autocomplete addressform. It still works but it is not saving the city parameter? Everything else is working and even if I check it on the google developers site it does not work? Have they changed something or is there an error they need to know about?
Googlemaps have changed the parameters, locality is now postal_town. I imagine a lot of people may be affected by this. Strange there is no documentation for this change and even their own site has not implemented it??!!!
I can confirm, google recently changed this field for UK. I have an web app that depended of this and I had to fix it.
I tried include the GoogleMap into Asp.net Web form by using the codes from
http://www.w3schools.com/googleapi/tryit.asp?filename=tryhtml_map_many.
But when I run the codes, it shows the map for awhile and display the errormessage. Anyone can tell me what is the cause and how to solve it?
Please enlighten me.
Read This page didn't load Google Maps correctly. See the JavaScript console for technical details
In other words, you should obtain an API key to be able to use the map, and set it in the code
<script
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
</script>
In my OpenLayers app I want to embed version 3.6 of the google maps api and thus request it like so:
<script type="text/javascript" scr="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script>
unfortunately google maps seems to send version 3.7 instead, at least the response contains:
getScript("http://maps.gstatic.com/intl/de_de/mapfiles/api-3/7/17/main.js");
this breaks my OpenLayers Map, because with every map move a copyright popup is displayed, although the map already shows the proper attribution credits. Any idea why this happens?
This problem has been discussed on the OpenLayers github page here. there are several options for solving the problem discussed. The quickest hacky fix is to add the following css,
.olLayerGooglePoweredBy {
visibility:hidden;
}
This does potentially break the terms of use, so i cant fully recommend it. It would be more wise to apply the patch discussed on the ticket. Also asking on there will probably get you a good answer too.
Version 3.6 has been withdrawn.
http://groups.google.com/group/google-maps-js-api-v3/msg/3f73f6593a787b7f
There's also http://groups.google.com/group/google-maps-js-api-v3-notify which it's a good idea to subscribe to.
Bugs should be reported in the issues tracker: http://code.google.com/p/gmaps-api-issues/issues/list (I can't find a relevant report for this issue). You will need to include a link to a demonstrator.
This will appear to a duplicate question but please consider this. I am doing an application with google map. my client need to load the places around the visitor, so i am trying to use geolocation. But all the google results and stackoverflow results shows, its impossible with wired network in Safari to get the location. Is there any other possibility that it can be implemented?(i have tried to use Modernizr and the Webshims even its example fails in safari, so i think no hope for that too)
my reference website is foursquare.com. its work perfect with map. is it using google map geolocation?
First of all i dont know is this the exact answer. But i find out a solution for my problem. I used geoLiteCity.dta database to get the location details from the IP addess. Then i Used geocoder to get the location in the map from that address. I am not sure is it a proper way or not, but as far as i am getting the locations. If there is any better way please let me know. Thanks