Google Maps API places library gives 404 error - google-maps

I have this on my page:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
I use this library so that on certain input elements I can display an autocomplete list of places.
Until a few days ago, it was working fine. Now, it doesn't work and I noticed this error on my Chrome's console:
GET http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/10a/%7Bmain,places%7D.js?_=1343069114062 404 (Not Found)
I've come so far as to understanding that it's the ?_=1343069114062 part that is breaking (try http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/10a/%7Bmain,places%7D.js - works fine.)
Can you help me figure this out?
Thank you.

Apparently something else on my document was interfering.
I just moved the script tag to another position in the document and everything now works fine.

Related

Can't load cast_framework.js on Chrome Sender

So a couple of month back I wrote a test sender to get some experience with Cast senders. It worked fine and I could send images and videos to my Chromecasts.
I now need to create a custom receiver and I wanted to use my old sender to test my receiver code. However, my sender doesn't work anymore eventhough I didn't change anything since then.
The errors i'm now getting in Chrome's console are the following:
GET file://www.gstatic.com/cast/sdk/libs/sender/1.0/cast_framework.js net::ERR_FILE_NOT_FOUND
Uncaught ReferenceError: cast is not defined
at window.__onGCastApiAvailable (script.js:84)
at chrome.cast.cb (cast_sender.js:99)
When I look at the "Network" tab I can see that the cast_framework.js file failed to load after 22s.
I then tried to use the sample on Google's Github to see if it was my sender that was at fault but I get the same error.
I also can reach the devices with the Cast button in Chrome's menu.
What is going on with that file? Is it my browser that has a problem? Is it my devices?
So the problem was the following:
As you can see the browser was looking for the file with file://. This happens because I launched my HTML file locally so the url in the browser was file:///home/.../index.html and I guess when it loads the framework file it guesses that it has to use file:// too instead of html://.
Someone told me that I should serve the file from a server so I made a brief Node server with express.static to serve the file and it then worked again when I loaded the page via localhost:4000.
I still don't know how it worked a couple of month ago but I guess I was just lucky in some way.
Upon checking, this file below is visible:
www.gstatic.com/cast/sdk/libs/sender/1.0/cast_framework.js
You might want to try putting these codes inside your head tag in your html file that calls "script.js":
Check this Github Guide
Include the cast_sender.js tag
Add the script tag to your HTML page
<script type="text/javascript" src="www.gstatic.com/cast/sdk/libs/sender/1.0/cast_framework.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>

Google Maps Error. API? ReferenceError: Can't find variable: google

I am encountering some issues with the google maps component of a site.
I understand there has been recent changes to the use of maps and have generated an API key to use on the site.
The map is displaying fine on the idex.html page but displays error..
ReferenceError: Can't find variable: google
on the other two pages?
I am really in out of my depth with these type of things and appreciate any support that may be offered. The site is live at maverickonthebay.com.au
I check the page(url),
I guess you need to remove the defer attribute from the google-maps-api load script tag.
Because the code is minify, is hard to check whats wrong and why.

Cannot load page on Firefox, Safari, IE (Polymer) - webcomponents.js error

I was building a page, and got into a problem which I was struggling with for awhile. The source code is here: https://gist.github.com/zafartahirov/077b3e9ca7fe9958c9e1 - sorry it's not on JSbin, I still cannot figure out how to use multiple files there.
The page works fine on Chrome, but gives me an error Firefox: TypeError: value is not a non-null object in webcomponents.js and Exception caught during observer callback: destributeNodeInto... in polymer.js.
The page is running on http://zafar.cc - but I am expecting to push a different version there once this problem is fixed. The GitHub repo for the page is here: https://github.com/zafartahirov/zafar.cc
Please, advise... :)
EDIT: The live example of the errors could be seen here: http://bl.ocks.org/zafartahirov/raw/077b3e9ca7fe9958c9e1/ - sorry about importing element/... - forgot to change it in the index.html
In elements/zaf-dropdown/zaf-dropdown.html:16 you have:
<shadow></shadow>
I bet you want to replace it with
<content></content>
or even simply drop it. This change fixes the behaviour in browsers not having native support for webcomponents yet.
P. S. IMHO, this is not a best idea to stole the design from polymer paper-elements project.

Google Maps Loading Async Issues

I'm trying to get Google Maps API v3 to work on my site and I'm running into 2 problems.
I'm using yepnope to load the API script asynchronously, and I get a "Load denied by X-Frame-Options" error in my console. It says http://maps.googleapis.com/maps/api/js?sensor=false&callback=init_google_maps&ver=3.0 does not permit cross-origin framing. This is odd to me because I'm not loading anything in a frame of any kind. Note that the map still loads, but the error in the console concerns me.
The map controls aren't displaying correctly. I don't think that this is related to the first issue because I get this even when I load the API the traditional way (synchronously), but it might be related in some way.
I'm not sure if it matters, but I'm running this on my "localhost" testing server. Any ideas on what could be causing these issues?
Update:
As discussed below, the X-Frame issue only occurs when I load the API via yepnope. I can't understand why using yepnope to inject a script tag causes the error and using a simpler js function doesn't though. My main concern, however, is the display of the map. I tested the map on a more stripped down page on my local server, and it displayed correctly. So, my current assumption is that I have a style (or script?) declared somewhere on the page that's interfering with Google maps.
Update 2:
Ok, the display issue if finally sorted out. I went through my main stylesheet and commented out portions until I had found the culprit. In order to make my images responsive in my fluid layout, I had declared img { max-width: 100%; }. Apparently, Google Maps don't like this. Once I overrode that style for the map container, everything displayed normally. The X-Frame issue still confounds me however.
Regarding the first problem, if you want to load the Maps API asynchronously, I would suggest using the technique described in the API documentation directly (a simple dynamically inserted <script> element) instead of yepnope. It should work fine that way.
On the second problem, running on localhost is no problem; that's a normal way to test a Maps API page. (I assume you mean using a local web server and loading your page in the browser from a localhost:// URL, not a file:// URL.)
Some symptoms like this can be caused by the map container element not being properly sized when the map is first created. In particular, trying to use height:100% can be problematic. But it's hard to guess without seeing a running example. Can you post the code to a web page somewhere? Maybe even in a JSFiddle if nothing else.

Jquery-ui library will not loaded/served by Google CDN from the Google site "insert html box"

For the past 3 months I have been struggling with the Google sites "insert html box" to get the CDN to serve the Jquery user interface library-jqueryui- without any success.
I have used the following code and its variants without any themes but to no avail;
The jquery library loads fine but not the jqueryui library. The Google developer site suggests that this should work, but I only get these error messages - failed to load external url jquery-ui.css OR folding element body into parent
What am I doing wrong?? Getting frustrated here!
Apparently this is a known bug. Take a look at the answer here
There is a bug link to the actual issue and a possible workaround.
Following the hint about jQuery not always working in HTML boxes, I experimented and found that some versions of jQuery UI will load!
As of today, I was able to load the following versions:
1.8.21,
1.8.20,
1.8.18
or, using the direct links to Googleapis:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.20/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
All other versions mentioned on https://developers.google.com/speed/libraries/ would not load.
That being said, I encountered more trouble when trying to link to the CSS themes. I couldn't find any way to get an HTML box to accept links to googleapis hosted jQuery UI CSS files.
I tried pasting the CSS directly into the HTML box, but the url() links to images are not kosher. Commenting them out resulted in my getting the HTML box editor to be at peace, but the attempt to make tabbed panes work was not successful.
To say that one can do jQuery inside a Google Site is almost an exaggeration.