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/
Related
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.
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.
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?
Is it possible to specify in Javascript to load surrounding tiles using Mapbox like google maps does? If so, how?
It looks rather glitchy every time you pan the map it only then starts loading the necessary tiles.
I cannot show you my app, but if you look at this Mapbox map example the same problem can be found here: https://a.tiles.mapbox.com/v3/ilyakar.i68649in/page.html?secure=1#14/50.0875/14.4152.
Foursquare uses Mapbox as well, somehow they eliminated this problem..
You are using v3 of the api - have you tried to upgrade to v4 of the api?
"Check your code to see if you’re requesting v3. If you’re still using v3, you’ll need to update to v4. In addition to changing the version number, you’ll also need to pass one of your access tokens with the request."
Re: https://www.mapbox.com/help/blank-tiles/
Is it possible to add google maps on a site designed specifically for the iPhone? I have never integrated maps in my websites before, so this question really goes more because of my inexperience.
Using basic html and javascript at the moment.
The Google Maps API V3 is specifically designed to work efficiently on mobile devices. There are some great tutorials here and here.
Any link to a Google Maps URL will automatically open in the Maps application, which may be more useful than simply embedding a map view in the website itself.
For example, a link to http://maps.google.com/maps?q=cupertino will automatically open the Maps application and run a search for "cupertino".
I think, if you only need a google map with some simple function. The simplest way is use the MapKit.Framework, it's a part of iphone OS. You can find the document here.
If you need to load your own web site, you need to use UIWebView. you can find the document here(http://developer.apple.com/iphone/library/documentation/UIKit/Reference/UIWebView_Class/Reference/Reference.html).
I think these two ways can help you solve your problem.
And sorry about the link, because I'm not allowed to post more than one hyperlink.