I am trying to run Google Map on a WordPress site. The code is running perfectly on this JSFIDDLE but when I take it to WordPress I am getting this error
Google Maps API warning: SensorNotRequired:
https://developers.google.com/maps/documentation/javascript/error-messages
I also tried this code
<script language="javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&v=3"></script>
but the result is same.
Finally I tried to get a key from API and use it
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxx&callback=initMap"
async defer></script>
and now I am getting this error
Uncaught TypeError: window.initMap is not a function
can you please let me know why this is happening and how I can fix it?
Instead of:
<script language="javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&v=3"></script>
Try:
<script language="javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
From the Google Maps API documentation:
The sensor parameter is no longer required for the Google Maps
JavaScript API. It won't prevent the Google Maps JavaScript API from
working correctly, but we recommend that you remove the sensor
parameter from the script element.
Related
I am trying to get Google Optimize experiment data in JavaScript, by following these instructions. But I get no callback and I can't see anything happening in the debugger either.
The linked instructions use the gtag way of configuring GA, so I have set up gtag according to https://developers.google.com/gtagjs/devguide/snippet, and configured Optimize according to https://support.google.com/optimize/answer/7513085?hl=en with Method 1: Install Optimize with the global site tag (gtag.js).
I want to show the exact code I am using, but since I am doing it in React with Next.js Server Side Rendering, the original code has some extra stuff compared to plain HTML+JS. The source looks like this:
require("dotenv").config()
import React from "react"
import Document, { Head, Main, NextScript } from "next/document"
export default class extends Document {
render() {
return (
<html>
<Head>
<script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_TRACKING_ID}`}/>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', '${process.env.GA_TRACKING_ID}', { optimize_id: '${process.env.OPTIMIZE_ID}'});
console.log('GA setup done: ${process.env.GA_TRACKING_ID} + ${process.env.OPTIMIZE_ID}');
gtag('event', 'optimize.callback', {
name: '${process.env.EXPERIMENT_ID}',
callback: o => console.log(o)
});
`
}}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
This code produces a result page that starts Analytics and tracks a pageView just like it should, and when I do "RUN DIAGNOSTICS" in the Google Optimize console it opens the page, checks the JavaScript and reports:
Optimize is correctly installed
No major issues were detected while verifying the Optimize installation on this page.
I have also installed the Google Chrome Tag Assistant plug-in, and it reports that the Google Optimize tag is correctly installed.
I can see the following calls in the network log:
https://www.googletagmanager.com/gtag/js?id=UA-xxxxxx
https://www.google-analytics.com/analytics.js
https://www.google-analytics.com/gtm/js?id=GTM-xxxxxx&t=gtag_UA_xxxx&cid=nnn.nnn
I have also verified that the google_optimize global variable is created, and it has a .get() method. If I look (in the debugger network panel) at the http response of the https://www.google-analytics.com/gtm/js?... request I can actually see the Google Optimize experiments data with the correct Experiment embedded in the code.
So everything looks good, except for the fact that the optimize.callback event seems to be a complete no-op. It does not do anything at all. And I don't know how else to access the experiments data that I see in the http response in the debugger.
So I finally figured out what caused my struggles: I was running from a local NodeJS server, on the usual http://localhost:3000 url. Turns out Google Optimize will never trigger an experiment on http://localhost/... urls. The code wants a hostname part of the url that can be parsed according to a host.domain scheme.
In other words, there must be a dot in the hostname for Optimize to trigger an experiment.
For local testing, this can be fixed by creating a hostname alias such as localhost.domain for 127.0.0.1, and accessing the web page using this alias.
I found a way, which can achieve start google optimize experiment with localhost.
So, just use next settings for google optimize experiment and it will start successfully.
I have been adding the following files in my cshtml page.
<script src="http://code.highcharts.com/maps/highmaps.js" )"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/drilldown.js"></script>
<script src="~/Content/js/balochistan.geojson"></script>
And the code for higmaps is present on the same page with script tag. Everything is working fine but hte map is not displaying and giving error for geojson file not being loaded.
http://localhost:9090/Content/js/balochistan.geojson net::ERR_ABORTED 404 (Not Found)
Can anyone please helpthat how a geojson file can be loaded properly and how to give static path to it correctly?
the file ends with .geojson can not be loaded like that - as script - because is a json file
Add this file is a set of json data - you need to loaded them on highcharts either with ajax load, either add them as variable at the beginning and connected to the chart.
Resolved:
The problem resolved by doing few steps like:
adding script tags in proper order.
secondly highmaps.js and highcharts.js file conflict with each other when used on the same page.
In order to resolve this issue you have to add
<script src="http://code.highcharts.com/highcharts-more.js"></script>
script tag in addition to highcharts.js and also replace the highmaps.js with:
<script src="//code.highcharts.com/maps/modules/map.js"></script>
like this:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="//code.highcharts.com/maps/modules/map.js"></script>
This resolved my problem and map is showing now.
I'm trying to use Google Optimise with Analytics installed by gtag.js and am getting errors in some parts of the Optimise UI but not others.
Here's what I've done:
Installed Google Analytics following the instructions "Set up Analytics tracking with gtag.js" (and confirmed it's working by using the Real-Time Preview).
Set up Google Analytics following the instructions "Deploy Optimize using Global Site Tag (gtag.js)"
Added the page-hiding snippet.
When I set up an experiment using the Chrome extension, Optimise appears to be running as Google expect - notice that there's no number shown by the exclamation mark icon in the screenshot below (there is if I remove the Optimise code), and clicking it says "no issues detected". (Also, the chrome extension's icon doesn't have any error symbol.)
However, if I then preview either the original or the variant (clicking the "screen" icon in Optimise), I get a javascript alert which says:
The Google Optimize snippet for the container with ID GTM-abcdef is not correctly installed on this page. To preview variants for this experiment, make sure the Google Optimize snippet is installed on any pages you want to test.
(I've replaced my actual container ID by "abcdef" in the above.)
And the Chrome extension icon also shows an error and a similar message when clicked (I've blacked out the experiment name here):
Here's my HTML <head> section (with IDs redacted):
I've compared the script from this with the example in "Deploy Optimize using Global Site Tag (gtag.js)" and they appear identical except that my code contains real IDs:
<head>
<meta charset="UTF-8">
<!-- Page hiding snippet (recommended) -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'GTM-zyxzyx':true});</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-abcdef"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-abcdef', { 'optimize_id': 'GTM-zyxzyx'});
</script>
<title></title>
</head>
I've tried this against a site running locally (on Flask's webserver, port 5000) and against a site deployed onto Heroku, and behaviour is the same in both instances.
I've also tried removing the page-hiding snippet code, but that didn't help.
I've also tried actually running the experiment but always saw the original variant even when setting the alternative one to have 100% traffic, so it's not working there. (I only tried this against local site, haven't tried against the Heroku instance.)
It's worth noting that there's this line in the GA code:
function gtag(){dataLayer.push(arguments);}
I've seen it online in that form and with the semi-colon at the end:
function gtag(){dataLayer.push(arguments)};
I've tried both without any effect.
What am I doing wrong here?
I don't know if this is correct, but should the hiding snippet be using the ID UA-abcdef?
If you’re using Google Tag Manager to deploy Optimize, populate the
page-hiding snippet with your Tag Manager container ID, not your
Optimize container ID. Learn more about using Optimize with a
tag-management system (from here: https://support.google.com/optimize/answer/7100284?hl=en)
I'm not sure whether deploying the code this way is classed as deploying Optimize with Google Tag Manager though. What do others think?
I got error when using the Google map
You have Included the Google Maps API multiple times on this page.
This may cause unexpected errors.
Google Maps API warning: SensorNotRequired
Google Maps API warning: NoApiKeys but I have a API keys
This is my footer tag
<script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/geofire/4.1.2/geofire.min.js">
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=">
</script>
Your API key is missing
It looks like you have not included the key in your Google maps script request.
Google has an official guide for how to set up everything
The take away in your case is that you included the script like so:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=">
</script>
You're missing the key parameter in the url. This is how google wants your request
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
type="text/javascript"></script>
Notice the part where it says key=YOUR_API_KEY That's where you need to put your API key.
The API key looks like this: (not an actual key)
AIzaSyBMh448pWbvhyvsqY4OasYmam4ppD2CHPM
Your final link should look like this:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMh448pWbvhyvsqY4OasYmam4ppD2CHPM"
type="text/javascript"></script>
More than one request
The other warning:
"You have Included the Google Maps API multiple times on this page"
indicates that your have tried to request Google maps API more than once on the same page. I don't see that in your example code. You may have another request someplace else like in the header. Don't use more than one per page.
Edit:
After looking at your page source I found this:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
This is the extra request that's causing the error where the API is requested multiple times.
under some conditions (that only god or google knows), this is not sufficient to provide the js tag...
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
... in order to load the Google V3 API. I must provide in these cases the following tag that loads the corresponding main.js:
<script type="text/javascript" src=" http://maps.gstatic.com/intl/pt_br/mapfiles/api-3/8/7/main.js"></script>
Because this file doesn't load automatically from the first script.
Do someone already experienced the same behaviour?
Probably that's because you don't specify api-version in script tag. This works fine for me:
<script src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>