I am using Ionic 2.2.3 for building hybrid mobile app. I am using Cordova Google Map plugin for plotting some points on google map. Same code base is working for all android devices fine but when I try to plot polyline in iOS(any device), the app gets crashed.
I am getting the points in below format -
{"lat":22.51,"lng":88.26},{"lat":22.549092,"lng":88.284892}
and then add the points to map -
map.addPolyline({
'points': points,
'color': "#DAA520",
'width': 6,
'name': '<line Name>'
}, function (polyline) {
polyline.on(plugin.google.maps.event.POLYLINE_CLICK, function (latlng) {
map.addMarker({
position: latlng,
}, function (marker) {
//some code to show the line details when clicked
});
});
});
When I run the same code in emulator, there are no issues and app runs fine. I guess there is some memory issue and I am struggling with same.
Yes. After checking some points I found out that it is breaking after few 100 points. So I am querying now some 100 points and rest based on user's query.
Related
I have a problem using Geolocation on Android device.
I create an Ionic 3 application.
I use Geolocation ( [https://ionicframework.com/docs/native/geolocation/ 13]).
I use the sample code provided there.
The problem is that, the code works in Browser but whenever I upload it on an Android device, it does not work.
When I start the app on device the alert for location permission is prompted.
I press Allow.
Then in the android tray an icon appears that says “Searching for GPS”.
After timeout expires I got the error for timeout and no location.
The strange think is this:
If I close my app, then open google maps ( or other app using gps position ) and reopen my app works as it should.
I don’t know what to do.
The permissions are fine :
and everything was installed properly.
Can anyone help please?
i got it actually i have to pass apikey with that like
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
in the index page
without this key it sometime works but not sure everytime.
Note : this key is only generated when you have a valid gmail a/c (by providing DOB/CreditCard nos) although its free .
try this, it should work
ionic cordova run android --prod
--prod makes production build apk
import { LocationAccuracy } from '#ionic-native/location-accuracy';
declare var navigator
Above
#Component
watchPosition() {
this.locationAccuracy.request(this.locationAccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then(
() => {
var options = {
timeout: 500,
maximumAge: Infinity
};
this.watch = navigator.geolocation.watchPosition((data) => {
let latlng: LatLng = new LatLng(data.coords.latitude, data.coords.longitude);
}, (error) => {
console.log("error watch", error)
}, options);
}
}, error => {
alert('Error requesting location permissions' + JSON.stringify(error))
});
}
}
We are using the nearby search feature as described here (https://developers.google.com/places/web-service/search) to perform auto check-in in Android as well as iOS mobile apps.
However, when we call the web API, many of the nearby locations do not show up in our results. At the same time, I do receive notifications from the Google Maps App on my Android phone, asking if i am at the venue meaning the google maps app correctly detects my location.
As an example I was dining at Nando's located at:
https://www.google.com/maps/place/Nando's+PERi-PERi/#41.8854864,-87.6238967,19.85z/data=!4m5!3m4!1s0x0:0x714d54c7334f4af6!8m2!3d41.885548!4d-87.624252
But when I called the nearby search, Nando's did not show up in my list of nearby places. I checked and my gps coordinates were correct and google maps was able to detect my location and check me in.
Anybody know why this happens? Is there a workaround or a solution for this problem?
You didn't post the Places API query, so it is difficult to say what is wrong in your application.
I tried it myself and it worked for me as expected. Let suppose I have a GPS coordinate 41.885565,-87.62425, this is a position more or less of the Nando's you mentioned in the description (have a look at Geocoder tool):
https://google-developers.appspot.com/maps/documentation/utils/geocoder/#q%3D41.885565%252C-87.62425
Now I can create a nearby search request for location 41.885565,-87.62425 with results rank by distance, so the nearest place will be the first in response and also we have to apply a type parameter in the request according to the documentation:
If rankby=distance (described under Optional parameters below) is specified, then one or more of keyword, name, or type is required.
The resulting request is
https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=41.885565%2C-87.62425&rankby=distance&type=restaurant&key=MY_API_KEY
With this request I get Nando's (place ID ChIJ9xIeWq8sDogR9kpPM8dUTXE) as the first item in the response
"results":[
{
"geometry":{
"location":{
"lat":41.8855475,"lng":-87.6242518
},
"viewport":{
"northeast":{
"lat":41.8870082302915,"lng":-87.62290226970849
},
"southwest":{
"lat":41.8843102697085,"lng":-87.6256002302915
}
}
},
"icon":"https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
"id":"a29ff7d92a100fd6f5a8c0e34dff84806838f2d9",
"name":"Nando's PERi-PERi",
"opening_hours":{
"open_now":false,
"weekday_text":[
]
},
"photos":[
{
"height":3036,
"html_attributions":[
"Marco Laure"
],
"photo_reference":"CmRaAAAAwbEPFsgrrjKVrplwBAAmKhKe5CkFX9wn_x1ZF9d6K8rRdT8tRUiW23-qEGLwbuf1wePdUkSrSN21a8r696kXGv6KYG42mI7RaDf2n80iLJlDVtEXys1KK4Hn9_nebsLwEhC6CQemKH3oHLe52i5m-JzOGhQoYbUFTntC5IuEzvASfjPvhDgr_g",
"width":4048
}
],
"place_id":"ChIJ9xIeWq8sDogR9kpPM8dUTXE",
"price_level":1,
"rating":4.2,
"reference":"CmRRAAAARrKCjwMLRvvXncBVw9pCf8RNq1GpfjDrHD8Jh_du12zBJxJ_eaGidizxAny31qn24BgZDpab346A3_QYbgaUMMZOnratR9XBNkQNS1a-DCPSFggzNjsUoOl_QQkhQU-DEhDExmV2z_pyXAkAoxRzIAVQGhT5kjoH3myVM7-vraAlw0EG512ykw",
"scope":"GOOGLE",
"types":[
"restaurant","food","point_of_interest","establishment"
],
"vicinity":"117 East Lake Street, Chicago"
},
I hope this helps!
I am making an android app where it will collect the overview_polyline->points string from the google maps api. For testing sake i have directly copied it(overview_polyline->points) and used as shown in the below code. I am using Polyutil to decode it:
List<LatLng> list = PolyUtil.decode("yxkpA_sjgMoAXuA#{GHeAFo#Jg#P[FcDHiCFu#B}#DkATiAFi#Hw#FcAKmAA[zG#n#DjAFpAPhB`#vBRt#`#|#dAbCg#F{B?eA?BpAAjC?vAC^W|#Ir#GdBe#hCm#lDpCl#|D~#J#?`AHdEAxGAVGZe#jBOnBzDLnGWPDFNRjDAjAG~#S|CCn#v#BXF?`#LtBEHOESC[BKBIJWWA?#?VV?PDbACJB?d#Ix#MRhBANABXRNDx#BBD#VD#FAj#?NB|#HAZLtBAf#CR");
I got the string from the below google direction api result:
"overview_polyline" : {
"points" : "yxkpA_sjgMoAXuA#{GHeAFo#Jg#P[FcDHiCFu#B}#DkATiAFi#Hw#FcAKmAA[zG#n#DjAFpAPhB`#vBRt#`#|#dAbCg#F{B?eA?BpAAjC?vAC^W|#Ir#GdBe#hCm#lDpCl#|D~#J#?`AHdEAxGAVGZe#jBOnBzDLnGWPDFNRjDAjAG~#S|CCn#v#BXF?`#LtBEHOESC[BKBIJWWA?#?VV?PDbACJB?d#Ix#MRhBANABXRNDx#BBD#VD#FAj#?NB|#HAZLtBAf#CR"
},
When i run the app it says java.lang.StringIndexOutOfBoundsException: length=268; index=268
I try to get the location of the device, to show on google maps.
Currently I use the following code:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latlng = new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude);
...
I just read Worklight has a WL.Device.Geo.acquirePosition function.
What is the best to use?
what you are doing is fine. THE WL.Device.geo api has a lot more that you can do than navigator.geolocation. But if all you are doing is plotting your current location on a map, either api will do.
I'm wondering if there are anyone out that have implemented Google Maps V2 and Baidu Maps in the same version; because GM doesn't work as intended in China?
Or should I split the project into two branches instead? However it would be nice to skip having two branches to maintain.
My solution for this was to implement GM as usual, however if the user has China set (via settings) static maps is to be used, BUT the static map is fetched from Baidu instead of google.
staticUrl = "http://api.map.baidu.com/staticimage?center="
+ location.getLongitude() + "," + location.getLatitude()
+ "&width=" + width + "&height=" + width + "&zoom=15"
+ "&markers=" + location.getLongitude() + "," + location.getLatitude();
Result of https://api.map.baidu.com/staticimage?center=121,31&width=300&height=300&zoom=15:
This method is NOT recommended if trying to implement a real map solution.
Since I have different locations only used by different countries, this solution could be used.
So, that is how I solved it. Hope someone finds this helpful.
Also, I have found that if you use http://ditu.google.cn while in China, it does work.
When using on-line maps in China for your application, whether it's Google Maps or Baidu, there is a transformation of latitude and longitude for legal reasons.
The satellite view in Google Maps uses "Earth" (WGS-84) coordinates. The map view of GMaps in China uses "Mars" coordinates (GCJ-02), and there is code to convert between the two. Baidu maps use the "Bearpaw" coordinates, with a different offset. The Baidu Map API has a demo converting between Google's coordinates and its own systems.
In China, GPS, like everything, has an extra layer of complication :)
If you have built this app, please post the details. Having an English interface to Baidu maps would be great.
You can use both Google Maps and Baidu Maps side by side, but make sure to convert from the WGS-84 coordinates (used by most of the world) to Baidu's coordinates (BD-09, different from China's GCJ-02). Here's some code that does that, based on an example from the Baidu Maps API:
// Google coordinates
var gPoint = new BMap.Point(121.4914, 31.2423); // lon, lat of the Bund Museum in Shanghai - https://www.google.com/maps/#31.2423,121.4914,19z
// gPoint = new BMap.Point(-122.0851053, 37.4219593); // lon, lat of the Googleplex (no Baidu map data but zooms out in Mountain View)
var labelOffset = { offset: new BMap.Size(20, -10) };
// Initialize map
var map = new BMap.Map('allmap');
map.centerAndZoom(gPoint, 15);
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})); // add scale
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.MapTypeControl()); // map type control: street/satellite/2.5D
map.enableScrollWheelZoom(); // mouse wheel scroll is disabled by default
// Add Google marker and label
var markerG = new BMap.Marker(gPoint);
map.addOverlay(markerG);
markerG.setLabel(new BMap.Label('Google coordinates marker appears<br/>at incorrect location on Baidu Map', labelOffset));
// Coordinate conversion ... GCJ-02 coordinates ... Baidu coordinates
BMap.Convertor.translate(gPoint, 2, function (point) {
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.setLabel(new BMap.Label('Converted to Baidu coordinates:<br/>' +
point.lng + ', ' +
point.lat +
'<br/>(note the offset of ' + (map.getDistance(gPoint, point)).toFixed(2) + ' meters)',
labelOffset));
map.addOverlay(new BMap.Polyline([gPoint, point])); // draw a line between points
});
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=gd0GyxGUxSCoAbmdyQBhyhrZ"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<div id="allmap"></div>
If the snippet above doesn't work due to the way StackOverflow sandboxes scripts, try the JSbin demo of Google -> Baidu coordinates conversion instead.
If you must perform the conversion offline, check out the evil transform project on GitHub.
It's unclear though what coordinate types browsers localized in Chinese will return via the navigator.geolocation API. I've made a test app for that and posted the question at
Showing navigator.geolocation.getCurrentPosition in Baidu Maps.
Further reading:
What causes the GPS shift in China?
Restrictions on geographic data in China
PROBABLY a bit late to the party, but I accidentally stumbled across something recently which might help you.
I tried baidu maps and it was shockingly difficult to setup and terrible to use so I had a look around and suddenly, google maps worked for me without a vpn!
I realised that the old google china server was still active and if you try:
maps.google.cn
you'll find that creating an iframe using the google.cn address works!
Try to use this way with Google coordinate
http://api.map.baidu.com/marker?location=39.916979519873,116.41004950566&output=html
If your server can access GM without issues (eg. your hosting is not in China mainland or it is but has uncensored connection), why don't you have server do loading data from GM and route it to user instead? We did that for few projects in the past, worked like a charm.
p.s. you could make php pull static map from GM for requested long/lat, store it into temp file on server, then pass back url to the temp file. From user's perspective they would be looking at (static) GM.
p.p.s. If you need user to be able to use GM's UI (do pan/zoom) then you'd need a bit more complex php that would alter all JS loaded from GM so all data would still be requested to your server which would then get maps - so basically to avoid any requests from client machine to be sent to GM server, but all to be sent to yours instead.