Previously working code that downloads a csv file from our site, now fails. Chrome, Safari and Edge don't display anything helpful except "Blob Blocked", but Firefox shows a stack trace;
Uncaught TypeError: Location.href setter: Access to 'blob:http://oursite.test/7e283bab-e48c-a942-928c-fae0907fdc82' from script denied.
Then a stack dump from googletagmanager
This appears to be a fault in the tagmanager code introduced in the last couple of weeks.
The fault appears in all browsers and is resolved immediately by commenting out the tag manager. The problem reported by a customer on the production system, and then found on both staging and locally. The customer advised they had used the export function successfully 2 weeks ago.
The question really is, do Google maintain a public facing issues log for things like the tag manager?
It's not about GTM as a library really, it's about poor user implementation. It's not up to Google to check for user-introduced conflicts with the rest of the site's functionality.
What you could do is go to GTM, and see what has been released in the past two weeks. Inspect things and look for anything that could interfere with the site's functionality. At the same time - do the opposite, see all the front-end changes introduced during this time frame by the web-dev team.
Things to watch for is mostly unclosured JS deployed in custom HTML tags. junior GTM implementation specialists like to use the global space, taking the global variables, often after the page is loaded, thus overwriting front-end's variables.
Sometimes, people would deploy minified unclosured code to the DOM, thus chaotically taking short var names. To the same end.
This is likely the easiest and most common way for GTM to break front-end. There definitely still are many ways to do so besides this though.
If this doesn't help, there's another easy way to debug it: make a new workspace from Default (or whatever is live), go into the preview mode and confirm that the issue still happens. Now start disabling newest created fired tags one by one and pinpoint which one causes the issue.
Let us know what it was.
Solution was to replace the previous tag manager code with the latest recommended snippet
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
Do you know, how to add open graph parameters to specific URLs on my site using Google Tag Manager? I couldn't find anywhere answer on that.
Thanks a lot!
No unfortunately not. Unlike Google where it's become a lot better in the last 3 years at using rendered JavaScript content to pick up code generated by tag managers - Facebook sadly hasn't advanced this far + will only pick up content in the actual HTML.
See this blog post (in Dutch) for guidance: http://vlcm.be/2017/07/open-graph-metatags-google-tag-manager/
So unfortunately when it comes to OGP and Twitter Cards you'll have to add them the old fashioned way.
I followed this guys tutorial
http://stiern.com/tutorials/adding-custom-google-maps-to-your-website/
The tutorial is on adding a custom google map to a website.
Everything works fine, as you can see http://olivegrove.com.gr/?page_id=7
I just really would like to have the directions function on the map,
as it is done on the actual google maps.
Is there a way of adding this?
Does any one a good tutorial on the internet for it?
It's not exactly the same, but it has powerful directions search capabilities; you may want to use the DirectionsServicedev-guide. If you are just starting out with Google Maps, you will also want to check out:
API-Doc
Code Samples
Utility Libraries
I built a web app where I'm using the Google API. Yesterday it worked fine but today I can't see the map anymore, just a grey background. The geo coordinates are fine and all the markers are in good position but the map isn't loading.
Is it something related to the API? Has anyone experienced this? Might be due to a cross-domain or policy issue?
just found that is may be due to the v= speficied
so you should use v=3.3
<script src="https://maps-api-ssl.google.com/maps/api/js?v=3.3&sensor=false" type="text/javascript"></script>
Is valid remember:
You don't need set the api version.
If you use: https://maps.googleapis.com/maps/api/js you just adds the key as a parameter.
Resulting in: https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"
Probably, the problem will be solved when you put a valid key.
How you register and get one key, you can see here: https://console.developers.google.com
I hope help you!