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
Related
I've got myself a bit of a head scratcher here, for me anyway, as I'm a bit new to all this.
I have WP a site that has its GA snippet inserted with Google Site Kit.
There is a plugin that, when a user registers, sets the users ID to a custom dimension.
The code to execute this 'set' has been added to the WP footer with the add_action('wp_footer') command.
The code looks like this:
<script type=\"text/javascript\" id=\"set-google-id-dimension\">
document.addEventListener(\"readystatechange\", event => {
if (event.target.readyState === \"complete\") {
try{
gtag('event', 'registration', {'dimension1': '".$client."'});
}catch(e){
try{
ga(function() {
// Logs an array of all tracker objects
var trackers = ga.getAll();
var firstTracker = trackers[0];
console.log('tracker: '+firstTracker.get('name'));
ga(firstTracker.get('name')+\".set\",\"dimension1\" ,\"".$client."\");
});
}catch(e){
console.log('GA and GTAG not defined');
}
}
}
});
</script>
For ease of reading, I've stripped out the PHP, but this is being echoed out in the footer.
Why the GTAG and GA command? Both analytics are being output in the console, though the site owner does not know why as "they only use Google Site Kit".
Now, this code works on the dev site that I control (and I've set it up to mimic the live site as best as possible):
However, when on the "live" site, the dimension is never set, even though I can see the 'set' command being executed (ignore the timestamps in the console, I forgot to screenshot before navigating away from the site and had to go back and reload the page):
The live site does not use the default tracker, hence the ga.getAll() call to access the tracker information.
From what I can see, everything should work fine.
I understand that from reviewing this question
Google Analytics Custom Dimension Not Being Set
that the 'set' needs to come before the 'send'.
I'm not sure how to accomplish this though since the plugin does not send the pageview to GA, from what I understand, that's Google Site Kit. I have contemplated adding a 2nd pageview send when this plugins code is loaded (it is only executed immediately after a registration and never again), but that would skew the page hits.
This site has had a myriad of "admins" over the years, so I wouldn't be surprised if there was something buried in one of the plugins causing a conflict somewhere. At one point I thought it was a timing issue, so I had the function load every 50 milliseconds checking for 'ga' to be defined, then execute the 'set' command (with a limit to 35 iterations), but the issue was the same (could set the command execute in the console, but the dimension did not reflect the value).
Any advice I can get to debug and get to the root cause would be of great assistance to me. Please ask any questions you need and I will respond as quickly as possible.
It seems a bit complex as a situation so understanding how it works and why there is gtag and ga at the same time is not easy to understand.
In any case, assuming that everything is working, what you can do is not to send a second pageview but send a dedicated event (by setting non-interaction to true) in this way you do not alter any information in Google Analytics and you can pass to the platform the data you are interested in (dimension1).
Can anybody help me to find a solution how to make this code work on my Wix-Site:
Click here to opt-out of Google Analytics
I have this code from Google itself (At the bottom of the page see "example"):
https://developers.google.com/analytics/devguides/collection/gajs/
Here is a Screenshot of this code from the google website:
Google Analytics Opt Out Code
I tried this:
$w("#text1").html = "<a href='javascript:gaOptout()'>Click here to opt-out of Google Analytics</a>";
But I was told that in Wix it is not possible to add events to a-tag elements in text element. Here you will find the little discussion that I had on Wix Forum:
https://www.wix.com/code/home/forum/questions-answers/how-to-link-text-to-a-url-using-w-link
I also asked on Reddit, Facebook and WixSupport. But nobody could help me with that issue.
You might want to take a look at the new wix feature called "tracking and analytics". It lets you embed custom scripts in your html's body, header, or footer.
https://support.wix.com/en/article/about-tracking-tools-analytics
You cannot access the HTML directly via Wix Code. Wix Code exposes a dedicated API for you to manipulate their controllers and elements on screen but not further under the hood.
You can use wix-fetch to call external API calls to google analytics (if they have an API to opt-out, not familiar enough to say here is the post)
anyway, your code in Wix should be something like this:
(as example API taken from their docs)
import {fetch} from 'wix-data'
fetch('https://analyticsreporting.googleapis.com/v4/...', options) // returns a Promise
I wanted to get a definitive answer on here for later reference now that we have a stable Ember RC. A combination of the top 2 search results for emberjs google analytics reveals that this is a good way to do track route changes:
App.ApplicationController = Ember.Controller.extend
routeChanged: ( ->
return unless window._gaq
Em.run.next ->
page = if window.location.hash.length > 0 then window.location.hash.substring(1) else window.location.pathname
_gaq.push(['_trackPage', page])
).observes('currentPath')
but then I also see results for using Event Tracking for single page web applications.
I haven't tested the code above yet, it takes a few hours to propagate changes to the GA dashboard. Update: This doesn't show up under the Content category on my Google Analytics dashboard. Neither under "Pages" or "Events".
If anyone has advice or if there's something I'm missing somewhere let me know. I can also PR a guide for the website based on the answers here.
Alex DiLiberto gave a really nice talk about a robust & scalable way of adding Google Analytics to an ember app in his EmberConf 2014 talk here.
- Slides
- GitHub
App.ApplicationRoute = Ember.Route.extend({
actions: {
didTransition: function() {
Ember.run.once(this, function() {
ga('send', 'pageview', this.router.get('url'));
});
}
}
});
The talk was aiming to be independent of which analytics library was used.
There is also now an official Ember Cookbook on implementing Google Analytics here.
I would use _trackPageview for things that have routable URLs and _trackEvent for things that don't.
In the Event Tracking link when they refer to "Embedded AJAX page elements". They're not meaning SPA's, but rather those cases when the URL stays the same, but some event that you wish to track happens within the page (in the case via AJAX).
There may be other cases where it makes sense to use _trackEvent, but for route transitions I'd use _trackPageview.
Using routeChanged() is not a good way to track dynamic segments such as /category/food /category/something since it's going to be fired only once. I wrote an article about this here: http://www.randomshouting.com/2013/05/04/Ember-and-Google-Analytics.html. I also consulted with the guys behind Ember and confirmed that this is indeed the proper way to track url changes for Google Analytics.
Most of these answers are outdated. You should be using a mixin and adding it to your Router to listen for the didTransition event and fire your pageview there. That way it's handled for all routes. There are several addons out there, including one I wrote called ember tracker which gives you pageviews and event tracking out-of-the-box.
You can see how I did it here. It's fairly straight forward.
i know it can track flash events from other flash banners/sites on other networks..
but can it from Adwords?
i found this code:
on (release) {
// Track with no action
getURL("javascript:pageTracker._trackPageview('/folder/file.html');");
}
but it seems to require a JS script on the page.
how does Adwords handle this?
thanks
-art
It should be fairly easy to try this and upload a banner to AdWords, but the following seems to imply that this is not allowed
http://adwords.google.com/support/aw/bin/static.py?hl=en&page=guide.cs&guide=28427&topic=28431
"Extra calls: Your ad code cannot make external server calls for additional JavaScript or other functionality. All functionality must be localized to the code itself. "
Also if you want to use Google Analytics within Flash, refer to the following documentation :
http://code.google.com/apis/analytics/docs/tracking/flashTrackingIntro.html
(in your case it sounds like Bridge mode is what you are looking for).
I normally use twitter both as a communication chat and as a short blog service. On my wordpress blog, I import the twitter messages timeline from one twitter account (specific for the blog-visible messages). For communication and chatting, I use another twitter account.
Having two account is a solution, but my geeky nature would prefer to have only one account, with the following magic: every message containing a special tag (e.g. "#blog") will appear on my wordpress blog page. Everything else will not appear on the blog.
Is it achievable with the standard twitter API? does something like this already exist for wordpress? The technical solution would be equivalent to a search for a tag only on a specific user's messages, something that, as far as I see, is currently not possible.
Thanks.
You'll want to use the twitter search API. Use this url to pull the data that you want to display:
http://search.twitter.com/search.xml?q=%23blog&from=mikeluby
You can change the .xml to .json if you want the query to return in json. Remove the ".xml" to get the normal search page to test out the query. Obviously you'll want to change "mikeluby" (my twitter username) to your username.
Update: There may be an issue with the xml return currently on twitter. I would check to see if it works for you. If it doesn't I would suggest switching to the json return or waiting until the problem is fixed.