Google Maps Error - javascript

I'm hoping someone has come across this problem also. I'm a newbie to all this, therefore excuse my lack of knowledge in advance.
I currently have Google Maps API setup on my wordpress site. When I perform a search on the site i.e. page containing Google Map, no listing results are been found. Upon further investigation I have been advised that:
there's a JS error on my website coming from Maps API. Chrome Dev Console shows:
js?key=++AIzaSyC_GzbCPmMM8Jme9ZAi-IbKOdaXo_SfK_I+&libraries=places&ver=3b47f53……:34 InvalidValueError: setComponentRestrictions: not an Object
in source view of the page the google maps JS is called via this
https://maps.google.com/maps/api/js?key=++AIzaSyC_GzbCPmMM8Jme9ZAi-IbKOdaXo_SfK_I+&libraries=places&ver=3b47f534942a304aaad0d1a98d2531f8
the part "&ver=3b47f534942a304aaad0d1a98d2531f8" shouldn't be there (it's added to each JS file), so we assume it must be coming from some plugin that I have that might be causing that issue.
Before I start disabling every plugin on my wordpress site, has anyone come across this error before?
Any help would be much appreciated.
Thanks,
Justin

OK - so apparently this was a bug introduced in the 3.27 release of Google Maps.
https://code.google.com/p/gmaps-api-issues/issues/detail?id=11253&q=setComponentRestrictions&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Stars%20ApiType%20Internal
The Google team has it logged and is working on it.
In the meantime you can do as follows:
Thanks for the report! We have created an internal ticket to investigate this.
On the meantime, you can load JavaScript API version 3.26 to avoid getting this error.
UPDATE: It does not look like they plan on fixing this. So the correct fix would be to change your settings to:
autocomplete.setComponentRestrictions({'country': []});

I have the same problem, but I have changed to the version 3 and it has worked. Obviously, that it isn't the best way to correct it, but I can use this solution up to somebody publishes the correct fix.
Before
http://maps.googleapis.com/maps/api/js?key=[MyKey]&libraries=places
After
http://maps.googleapis.com/maps/api/js?key=[MyKey]&libraries=places&v=3

I just started noticing a similar error as well, InvalidValueError: setComponentRestrictions: in property country: not a string; and not an Array. It turns out I was passing an empty object, {}, as the componentRestrictions option when trying to initialize a Place Autocomplete.
It looks like that componentRestrictions option is used by the Google Maps API, you can read more about it here. I am assuming that Google recently made a change that throws an exception if it is configured wrong.
So in your particular case I imagine either you, or one of your plugins, is not setting componentRestrictions correctly.

Upgrade Google Maps to Version 3.28.

Related

arrayForEach was called with a non array value. Google Calendar

I am trying to get events from my Calendar. I walked through all tutorials and searched through internet, but it seems like i am the only one who get the error. My calendar oppened for everyone. ClientId, Api key, DISCOVERY_DOCS and SCOPES are correct, because i purposly made them wrong to check. Also i tried to change calendarId from 'primary' to actual calendar id, which is my email address. Same story. I am signed in and approved, so it is not the problem for sure. There are events in my Calendar, so it should have an array anyway. Looks like it doesn't get the array on some part of code and it is not possible for me to debug it step by step. At this point i completely don't understand what is wrong.
So the code straight from this tutorial JavaScript Google Calendar, only CLIENT_ID and API_KEY changed, and there is no point inserting the same code here i guess.
I have the same problem when using visual studio with .net core. I found a problem with the file "browser-sync-client.js". I blocked the request to this file and it worked. So I change to use pure HTML,js without the visual studio.
I had the same issue since I upgraded to VisualStudio 2022, I don't know if it's usefull. I didn't understand how to fix it yet.

Problems using Ionic Native API and Javascript API in same app?

I'm making an app using Google Maps that makes use of BOTH the Ionic Native Google Maps API and the JavaScript version. Of course, the Native API is used on one page called home.ts, and the Javascript API on a sub page called details.ts which is reached by tapping on the infoWindow for a marker.
So far, this setup actually appears to work for me - but apparently I need to import "GoogleMaps" from #ionic-native/google-maps into both details.ts and home.ts for the map images to load on the main page - the markers and everything else will work fine.
Unfortunately, I need both APIs because Ionic Native does not yet support the use of the Google Places API. However, this seems to have led to at least one nasty issue so far -
On iOS, the app has a random chance of crashing/freezing when doing any sort of transition event, whether changing from page to another (the usual cause) or even just panning inside the map generated by details.ts. In XCode, when the crash occurs, the error I see in the console is something like this:
*** -[__NSPlaceholderArray initWithObjects:count:]: attempt to insert nil object from objects[2]
Of course, the number in objects[2] can be any number, as far as I can tell.
I haven't seen anything like this in the Android version of this app yet, but I have a hunch that it's there. I talked to someone who thinks that the app randomly attempts to use the wrong API, but I was hoping someone could provide a little more insight, and perhaps any other things that COULD go wrong with such a setup.
when you are working with ionic and google maps app most of cordova plugins have issues recommenced to follow google maps js docs or follow https://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/

Implementing Google Maps API Key into Java Project using Vaadin

I have taken over a an ongoing project that is written in Java (something that I have no prior experience with, but I can code Python and C++) using Eclipse (which I am also new to). The project uses Vaadin components, and Eclipse runs it with glassfish which pops up a page in the browser with the results.
I have been successful in navigating myself around the code and made a few modifications, however one of them is a tiny Google Map with markers and I have having trouble displaying it. The previous owner has already set up a Google Maps API for it. When I run the code in Eclipse, the result appears with a link that starts with "localhost:8080..." which does not display the Google Map ("Oops something went wrong. This page didn't load Google Maps correctly. See the Javascript console for technical details."). The API become accessible to the component when I switch "localhost" with the IP of the computer, and the map displays.
I am trying to replace the API key of the previous owner of the project with one that I have just acquired here at Google Developers Console. While I have also searched and found many examples that are very similar to this one, I cannot locate any javacript files within the project via Eclipse that I can apply the solution with.
With the ultimate goal for this is to host the exported .war file on a server, any help on how to locate the link between the code and the API key is much appreciated.
Thanks
I suggest you use this semi-official addon instead of trying to roll your own. It allows you to give the API key directly in the component constructor.
You should check out the Vaadin add-on directory for other needs as well, it has hundreds of useful addons for many purposes.

Using Google Maps offline (Js Api)

I'm trying to make an NodeJs App in which, on web page I'm using Maps, For some reasons I've chosen Google Maps and I want to stick to it. My question is, Is there anyway where I can either store or cache map tiles offline and later on use it as needed [Note: Not looking for any hack or Illegal way for it, I already know there are many such ways].
I tried and saw many options like GEE (Google Earth Enterprise) portable but I guess they are shutting it down very soon i.e by 2017.
Basically what I'm trying here is to minimize the data usage on rendering map tiles, so alternatively, if there ain't a way to make google map work offline any suggestion or advice for minimizing data usage is appreciated.
The offline access via Maps JavaScript API is not available at the moment. There is a feature request in the public issue tracker:
https://issuetracker.google.com/issues/35827808
Please star this feature request to express your interest and receive further updates from Google.
1.Use Localstorage instead it might help but will be used in google chrome.
2.Check this url it might help How to cache Google map tiles for offline usage?

Google Maps JavaScript API v3

Please can someone point me in the right direction.
I have spent a few days watching videos and reading up on google maps and am more confused now than when I started.
I run a worpress site and want to add a google map to show venues. I have done this by copying the the html from a previous google map that I created. I decided to start afresh and try to style the map that it looks more attractive and also see if I could create a database with my site locations that I could update.
In the process I came across a pluging that asked me for my API key. I struggled to find my API key and then started reading that google maps has done away with its previous version and is now using something called Google Maps JavaScript API v3.
Please can someone guide me how to go about using this and what its all about. I've read up on Google Maps JavaScript API v3 but am still confused. ?
If someone has some useful videos, like idiots guide to getting started....
The basic documentation can be found at google's developers site. If you are struggling with the basic maps functionality and skinning, you may find it helpful to use a wrapper that simplifies a lot of the process, like this gmaps project on github.
If you have a more specific problem, maybe you could edit your post and list exactly what hurdles you are facing.
If you are using Wordpress, why not try a plugin directly? It would probably take care of all the specifics, and leave you with just having to deal with managing the site. This one has rather good ratings:
http://wordpress.org/extend/plugins/mappress-google-maps-for-wordpress/
Regarding your API key, it's something Google gives you when you register your site in order to use Maps. Try re registering.
Check this out: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/getting-creative-with-the-google-maps-api/. Kind of like a beginners guide...

Categories

Resources