I spent a lot of time trying to figure this out.
I have a map on my application and this map loads the actual location once it is loaded.
For some reason on my viewer (using Ionic Viewer) it works on my local device and on my localhost, but When I test it on my iPhone directly from Xcode, the map don't load.
If I compile an .apk and test it on android, the map don't load either.
.controller('mapaCtrl', function($scope, $compile, $location) {
$scope.goPayment = function() {
$location.path('side-menu/history');
};
var myLatlng = new google.maps.LatLng(34.603711, -58.381585);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
navigator.geolocation.getCurrentPosition(function(pos) {
map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map,
title: "My Location"
});
google.maps.event.addListener(myLocation, 'click', function() {
infowindow.open(map,myLocation);
});
});
var contentString = "<div><a ng-click='clickTest()'>Pagar Aqui!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
$scope.map = map;
$scope.clickTest = function() {
$location.path('side-menu/pay');
};
})
Any clue?
There may be several things affecting the proper functionality of your app, consider the following:
There could be an issue where the requests to google maps are blocked. Check out the whitelist plugin: https://stackoverflow.com/a/29896923/1956540
Try adding geoLocation permissions, here is an article I found that walks you through the whole thing: http://www.gajotres.net/using-cordova-geoloacation-api-with-google-maps-in-ionic-framework/
It is also important to wrap geolocation code into Ionic deviceready
event, execution will timeout without it:
ionic.Platform.ready(function() {
// Code goes here
}
I'm not sure it's necessary to have these anymore but I know for Android you could verify the permissions needed to exist in AndroidManifest.xml:
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
There is probably some iOS equivalent that you can search for but I think installing the plugin should work on its own.
--
Related
I can not give much information, I just followed the tutorial from https://developers.google.com/maps/documentation/javascript/overview#js_api_loader_package to show a basic map.
the code is working properly on browser.
As requested, the code that is not working on mobile device:
let position;
this.geolocalizationService.getCurrentPosition().then(
p => {
position = { lat: p.coords.latitude, lng: p.coords.longitude};
},
err => this.logger.err(`Error in poisition obtaining ${err}`)
);
const loader = new Loader({
apiKey: 'MY_API_KEY',
version: 'weekly'
});
loader.load().then(() => {
this.map = new google.maps.Map(document.getElementById('map'), {
center: position,
zoom: 10,
});
});
The geolocalization method is correctly returning the position of the device.
I build android apk and install apk in android lolipop adn application work correctly but if application install to android kitkat it doesn't work and just show splashscreen after it just white blank in interface.
I know the trouble in parse json but i don't know how to fix it
this my parse json
kaka.cari($scope.item.code).success(function(data){
$scope.result1= data;
var lat0 = parseFloat(data[0].latitude);
var lng0 = parseFloat(data[0].longitude);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: {lat: lat0, lng: lng0},
mapTypeId: 'terrain'
});
var flightPlanCoordinates = data.map((item)=>{
// create new object based on current item
var coords = {
lat: parseFloat(item.latitude),
lng: parseFloat(item.longitude)
};
// return to new array
return coords;
});
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
})
.error(function(data){
});
};
if i don't use var flightPlanCoordinates and try hardcode lat and long it work but if i use var flightPlanCoordinates will be error in android kitkat but not error in ionic serve
This my json
[{"latitude":"-7.331069","longitude":"112.764192"},{"latitude":"-7.331277","longitude":"112.764198"},{"latitude":"-7.331467","longitude":"112.764186"},{"latitude":"-7.331659","longitude":"112.764159"},{"latitude":"-7.331840","longitude":"112.764154"},{"latitude":"-7.332016","longitude":"112.764133"},{"latitude":"-7.332192","longitude":"112.764112"},{"latitude":"-7.332400","longitude":"112.764101"},{"latitude":"-7.332592","longitude":"112.764074"},{"latitude":"-7.332789","longitude":"112.764074"},{"latitude":"-7.333018","longitude":"112.764047"},{"latitude":"-7.333236","longitude":"112.764042"},{"latitude":"-7.333465","longitude":"112.763994"},{"latitude":"-7.333662","longitude":"112.763956"},{"latitude":"-7.333843","longitude":"112.763838"},{"latitude":"-7.333965","longitude":"112.763704"},{"latitude":"-7.333933","longitude":"112.763747"},{"latitude":"-7.334034","longitude":"112.763608"},{"latitude":"-7.333981","longitude":"112.763297"},{"latitude":"-7.333917","longitude":"112.763018"},{"latitude":"-7.333901","longitude":"112.762723"},{"latitude":"-7.333869","longitude":"112.762444"},{"latitude":"-7.333832","longitude":"112.762127"},{"latitude":"-7.333800","longitude":"112.761730"},{"latitude":"-7.333768","longitude":"112.761473"}]
this data console.log(flightPlanCoordinates)
0:Object
lat:-7.331069
lng:112.764192
1:Object
2:Object
3:Object
4:Object
5:Object
6:Object
7:Object
8:Object
9:Object
10:Object
11:Object
12:Object
13:Object
14:Object
15:Object
16:Object
17:Object
18:Object
19:Object
20:Object
21:Object
22:Object
23:Object
24:Object
please help me solve my problem
I've been tasked with adding a map to my appcelerator project. I have tried the alloy way (since I'm using alloy in the project). That apparently doesn't work and its been suggested that I create the map in the controller. I have done that below and the call to the map is triggered by an onclick function attached to an icon on the primary window. This seems to work on iOS but causes the app to crash on Android (using a samsung note)
function openMap(){
alert(alertString);
//var map = Alloy.createController('map');
//$.map.show();
//add alert location here -- get the data from the push message that comes in
var payload = Ti.App.Properties.getString("latest_buddy_alert","empty");
if (payload != "empty"){
var messageDetails = parsePushMessage(payload);
}
opera = mapview.createAnnotation({
latitude: messageDetails['lat'], // 43.7000,
longitude: messageDetails['lng'], // 79.4000,
title: alert,
pincolor:Map.ANNOTATION_RED,
});
var winMap = Titanium.UI.createWindow({
title:'Buddy Location',
BackgroundColor:'#fff'
});
var mapview = Titanium.Map.createView({
mapType: Titanium.Map.STANDARD_TYPE,
region: {latitude:lat, longitude:lon, latitudeDelta:0.01, longitudeDelta:0.01},
animate:true,
regionFit:true,
userLocation:true
,annotations: [opera]
});
winMap.add(mapview);
winMap.open();
Titanium.Geolocation.getCurrentPosition(function(e) {
if (e.error) {
Ti.API.log('error: ' + JSON.stringify(e.error) );
return;
}
var region = {
latitude:e.coords.latitude,
longitude:e.coords.longitude,
animate:true,
latitudeDelta:0.04,
longitudeDelta:0.04
};
mapview.setLocation(region);
});
}
As mentioned above, this creates an error which crashes the app:
Location[1,1] undefined
uncaught syntaxerror: unexpected token u
source: undefined
This is totally unhelpful, since I don't use a token 'u' or variable 'u' anywhere in my code. I have used several variations on the code above, all giving the same error.
I have had some small success moving to a webview, which shows the map on apple, but not on android.
Any ideas?
I use cordova
// Platform: android
// 3.5.1
When I use Geolocation
var options = {enableHighAccuracy: true};
navigator.geolocation.getCurrentPosition(that.geoSuccess, that.geoError, options);
this.geoSuccess = function(position) {
console.log("geoSuccess :"+position.coords.latitude+", "+ position.coords.longitude)
that.mylocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
};
I get in the log:
31.4956033, 34.9326514
which is a 3.7 Kilometre from my actual location.
Any idea why? or how to fix?
on ios I get the following position:
31.518463052524, 34.90405467862522
which is my actual position, therefore the code is correct.
When I use google map (on the android device) my position is correct, therefore it's not hardware problem.
in my manifest I have:
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
I noticed this problem as well. However, when I polled my location for change using watchPosition, it fixed it for me. From what I can tell, the initial GPS fix is inaccurate. Given time it closes the distance.
Something like:
watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
function onSuccess(position) {
var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(myLatLng);
if(marker!=null)
marker.setMap(null);
marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'My Location'
});
}
You need to ask for high accuracy
var options = {enableHighAccuracy: true};
navigator.geolocation.getCurrentPosition(that.geoSuccess, that.geoError, options);
Geolocation options
I used to use the native Android map on my applications, however, i've read that it is better to use Maps API V3, so i have read the docs but the problem is i don't know how to implement it in JAVA code(That's JavaScript). I want to add an overlay in my map, here is JS code:
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
The question is how to implement it in JAVA/Android?
Thank you vrey much.