ReferenceError: google is not defined - google-maps

I use google map's api in my website to show couple of locations. Google Maps is working just fine in my local solution but not in my website. I changed this source
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"> </script>
to this one. and i again changed this
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
with this one...
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"> </script>
Only thing it says: ReferenceError: google is not defined
Does anyone familiar with such problem?

Owing to the fact that my website uses https for the connection, I can not use http://maps.google.com/maps/api/js?sensor=false. When I debug the whole page, this link says: Warning : The page index.html ran insecure content. so I made another search on google and came across to this question. so what basically causes a problem is not using https link in the source part so the correct link will be (for me)
https://maps.google.com/maps/api/js?sensor=false
now everything works just fine!

That's an old URL. If you look at the examples from the documentation, almost all of them use:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

To me, with the new Google Maps API, simply this solution worked:
Just omit "async defer" from the script provided by goolge:
<script async defer src="https://maps.googleapis.com/maps/api/js?key={your_key}"></script>
TO
<script src="https://maps.googleapis.com/maps/api/js?key={your_key}"></script>

i met this problem in the rails application.
request to googlemap was from http and https pages
and it solved:
= javascript_include_tag "//maps.google.com/maps/api/js?sensor=false"
if protocol not defined rails inserts automatic

Related

How do I get <script type="module"> to use the given Authorization header?

When loading a website with multiple <script> and <script type="module"> declarations, the Authorization: header is applied for scripts but not for modules.
<script src="lib/a-lib.js"></script> works
<script type="module" src="app/a-module.js"></script> stucks with a 401.
Username/Password in the URL works too: <script type="module" src="https://user:password#domain/app/a-module.js"></script>. But since username:password are not converted to a Header, this is not a solution.
I've just made a quick googling because it's quite interesting and found this:
You can add credentials to a same-origin module by including the crossorigin attribute (which seems a bit weird to me, and I've questioned this in the spec). If you want to send credentials to other origins too, use crossorigin="use-credentials". Note that the other origin will have to respond with the Access-Control-Allow-Credentials: true header.
at jake's site.
Hope it helps ;)

How do you use a background.html page (instead of background.js) with Manifest 2 in a Chrome Extension

I have a Chrome Extension that worked great with the background specified as a script (background.js). Chrome created a virtual background.html page...
I need to a script to background (to get Google Drive integration) and so (as I understand it) need to move to background.html.
My Manifest now specifies:
"background": {
"page": "background.html"},
I added "https://apis.google.com/js/api.js" to my original setup (below) to gain Google Drive access for my Chrome Extension...but my background page was throwing "gapi is not defined" errors...so I switched to background.html to try and get my background processes to be able to access the Drive scripts.
"background": {
"scripts": ["/dscripts/jquery-3.1.1.min.js","/dscripts/firebase.js","/dscripts/bootstrap-multiselect.min.js","/dscripts/bootstrap.min.js", "https://apis.google.com/js/api.js", "/scripts/background.js"]},
My new background.html page looks like:
<!DOCTYPE html>
<html>
<head>
<!--Original javascript / CDN -->
<script type="text/javascript" src="dscripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="dscripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="dscripts/bootstrap.min.js"></script>
<script type="text/javascript" src="dscripts/bootstrap-toggle.min.js"></script>
<!-- FIREBASE - I think we only need JS, not app.js and auth.js -->
<script src="dscripts/firebase.js"></script>
<!-- <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script> -->
<!-- Google APIS -->
<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
<!-- background.js -->
<script type="text/javascript" src="scripts/background.js">
</head>
</html>
I haven't made any changes to background.js - which holds chrome.runtime.onStartup.addListener and lots of well-established logic.
When I run my Extension and view the background.html console, I get:
Navigated to chrome-extension://XXXXX/background.html
Usually there would be a ton of debug console content generated by my background.js file. It's as if the background.js doesn't run.
Which makes sense, I guess - there's no dom to load and trigger actions.
I feel like I'm missing something really obvious (apologies) - but all the examples I could find use background.js, not background.html.
How do I get my javascript to fire when specifying background.html?
Was missing closing tag on the background.js file. Once I added that then the js in background ran exactly as expected.
So there is no extra action (for those coming after) required to use your own background.html page vs. the auto-generated one.

404 file not found on believed correct path?

I have a simple Angular application that I am bundling with Gulp. The index.html has a script reference of:
<script src="./../../js/all.js" charset="utf-8"></script>
and a file structure:
Does this not seem accurately relative?
I am also serving from the public/html/layout/index.html
try
<script src="../../js/all.js" charset="utf-8"></script>
The resolution involved a best practice of placing the index.html at a higher level directory. Still didn't explain why the issue occurred, but the issue is no longer affecting me.
If you are using Google Chrome then you can open your index.html in the browser and goto View Source.
Find this line in the source: <script src="./../../js/all.js" charset="utf-8"></script>
and click the hyperlink of the file. It will then show you the complete address of the javascript file the browser is trying to load. Once you get the complete address I believe you can fix this issue easily.

Embed Yammer into Ionic/Cordova Hybrid app

Just wondering if anyone had done this before, i have used the code that yammer provide in order to embed a certain group or page into an application, here is my class file below:
<ion-view view-title="Feed">
<ion-content>
<body>
<div id="embedded-feed" style="height:200px;width:100px;"></div>
<script type="text/javascript" src="https://assets.yammer.com/assets/platform_embed.js"></script>
<script type="text/javascript"> yam.connect.embedFeed({
container: "#embedded-feed",
network: "MyGroup.com",
feedType: "group",
feedId: "111111"});
</script>
</body>
</ion-content>
</ion-view>
when i run the page in a browser it shows fine, yet nothing shows when ran on an ios simulator.
Any help is appriciated,
thanks.
You probably need to add https://assets.yammer.com (or maybe even *.yammer.com) to the whitelisted urls in the cordova container, otherwise all communications will be blocked.
yammer embedded-feed is not possible in cordova hybrid app. Use REST APIs to get the message/ feed .

How do I create a relative link to a downloaded jquery library?

I am having trouble linking to a jquery library and am wondering if someone might be able to point out what I am doing wrong.
My html page is a locally hosted Sharepoint site here:
http://server/sites/blog/dude/Pages/MyPage.html
and my jquery library is located here:
http://server/sites/blog/style%20library/js/jquery-1.7.2.min.js
I it works fine if I reference the whole jquery address like so:
<script language="javascript" type="text/javascript" src='http://server/sites/blog/style%20library/js/jquery-1.7.2.min.js'></script>
But it isn't located when I do this:
<script language="javascript" type="text/javascript" src='../../blog/style%20library/js/jquery-1.7.2.min.js'></script>
Am I using the "folder up" syntax incorrectly perhaps?
Just put /sites/blog/style%20library/js/jquery-1.7.2.min.js
The leading slash tells the browser to go to the host and start from there.