I try to run a google map in my cordova application. It displays well on mobile (Iphone 5s) but not on my tablet (Nexus 7).
Here my map display function :
function onSuccessMap() {
var myLocation = new google.maps.LatLng(LATITUDE, LONGITUDE);
if (map === null)
{
directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
map = new google.maps.Map(document.getElementById('directionMap'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myLocation,
disableDoubleClickZoom: true,
zoom: 8
});
directionsDisplay.setMap(map);
}
}
The map appears at the top left of the screen and doesn't take up all the space.
I hope I have given enough information
I believe you need to set the width and height of the div containing the map (#directionMap).
(the div should take the space independently. The map will not make the div bigger). Nexus 7 runs probably KitKat, and the difference stems from Chromium vs. Webkit.
Related
I'm using the nativescript-google-maps-sdk plugin to create a Google map.
Everything works fine but I've got a problem with my custom marker icons, if you look at these pictures you can see that the icon size is not preserved on Android, making them very, very small to the point where you can barely even see them. This happens both in the emulators and on a real phone.
On IOS however the size is fine, as you can see in the 2nd image. The icon images have a size of 16x16 pixels and are in .png format.
I haven't been able to find any solution to this so this is my last resort, does anyone know why this might be happening?
This is the code I use to create the markers:
getImage(this.getWarningIcon(warning.status)).then((result) => {
const icon = new Image();
icon.imageSource = result;
const marker = new Marker();
marker.position = warning.centerOfPolygon;
marker.icon = icon;
marker.flat = true;
marker.anchor = [0.5, 0.5];
marker.visible = warning.isVisible;
marker.zIndex = zIndexOffset;
marker.infoWindowTemplate = 'markerTemplate';
marker.userData = {
description: warning.description,
startTime: warning.startTime,
completionTime: warning.completionTime,
freeText: warning.freeText
};
this.layers.push(marker);
this.map.addMarker(marker);
});
In that case 16px sounds too low for a high density device. Increase the size of the image sent from server or locally resize the image before passing it to marker.
You may also consider generating a scaled bitmap natively if you are familiar with Android apis. Image processing is something always complicated in Android. Using drawables are recommend when your images are static at least.
I am developing one application with Cordova, AngularJs and OnsenUI,
I am using Google Maps Api to show my current location and around 200 other locations marker,
Google maps works fine in all other devices but app crashes when i zoom in IOS-11.3 with Iphone X only,
Cordova : 6.5.0
AngularJs 1
npm: 2.14.0
I have added firebase crash report plugin and it reported OOM(Out Of Memory) report for crash,
Marker image size is only 1kb and around 200 markers are there.
Here is my code
var mapProp = {
center: new google.maps.LatLng(userlocation.latitude, userlocation.longitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
MapOptions: {
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false
}
};
var map = new google.maps.Map(document.getElementById("mapNearByBreweries"), mapProp);
var usermarker = new google.maps.Marker({
position: new google.maps.LatLng(userlocation.latitude, userlocation.longitude),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7,
strokeColor: "#0000FF",
},
draggable: false,
map: map
});
for (var i = 0; i < breweries.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(breweries[i].Latitude, breweries[i].Longitude),
map: map,
icon: 'images/blue-dot.png'
//animation: google.maps.Animation.BOUNCE
});
So, which new things in ios 11.3(IphoneX) can cause out of memory in google map api on zoom?
and what can i do to resolve this issue?
We had this exact issue and rolling back to Google Maps version 3.31 worked for us :)
You can check out the different versions available here:
https://developers.google.com/maps/documentation/javascript/releases#321
Apparently they switched to an experimental renderer in 3.32 and it broke the fast zoom with custom markers for us.
Hope this helps!
I'm using Wikitude (on Android with the Javascript APIs) to show a transparent video inside of the AR experience. I don't have a marker on which putting my video. That video has its coordinates (relative to the user's position) and I want to place it on an exact position so that the user can see it when its device is pointing towards that direction.
In order to do that I used an AR.RelativeLocation object and placed a VideoDrawable on a particular position.
// the location
var location = new AR.RelativeLocation(null, 5, 5, 0);
// the video
var video = new AR.VideoDrawable("assets/transparentVideo.mp4", 5, {
scale: {
x: 1,
y: 1,
z: 1
},
isTransparent: true,
onLoaded: this.worldLoaded
});
video.play(0) // the video starts immediately
// the GeoObject showing the video
var obj = new AR.GeoObject(location, {
drawables: {
cam: [video]
}
});
The problem is that the video is not stable at all. When I turn my device I see the video approximately on its position but it's not fixed: it moves following my camera movements for a while as if it would placed by using the movement sensor rather than the gyroscope. Is there a possibility to stabilize it?
The Wikitude Android SDK is not using the gyroscope at the moment but a combination of accelerometer and compass to calculate the orientation. There is also no method to change the accuracy. What you can try is calibrating your compass like described here: https://support.google.com/maps/answer/6145351?hl=en or here: https://android.stackexchange.com/questions/10145/how-can-i-calibrate-the-compass-on-my-phone and try to keep a distance to things that can influence the compass accuracy like other electrical devices.
I use OpenStreetMap on a responsive Website and have some display issues.
The map is displayed very well on my Samsung S4 with Android.
The Map is not displayed on my iPad2 with OS5 or Sony Z with Android
I use
map = new OpenLayers.Map("basicMap");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
I thought the error is here
map.setCenter(new OpenLayers.LonLat(3, 3) // Center of the map
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
), 15 // Zoom level
);
but the use of transform() without parameters was not successful.
any suggestions ?
I am currently creating a game in HTML5 using Canvas. Right now, it works pretty well with all the internet browsers except Google Chrome for Android which refuses to display my "filltext" commands...
I noticed that the game worked when I disabled the 2D acceleration of Chrome Android through chrome://flags/... but i obviously cannot ask users to disable their 2D acceleration feature of Chrome prior to playing. Does anybody have a solution to display my filltext under google chrome for android?
You will find below the code: basically, i can see the text in all the browsers except chrome for android... it draws the background and not the text.
//Get the canvas
var canvas2 = document.getElementById("layer2");
var ctx2 = canvas2.getContext("2d");
//Rendering function (draw background and draw image)
var render = function () {
ctx2.drawImage(background, 0, 0);
ctx2.fillText("Lolo", 400, 400);
}
// main loop
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
};
var then = Date.now();
setInterval(main, 1);
Thank you!
Laurent
This appears to be a bug with the software renderer, you will need to make your canvas at least 256 pixels in size to force it in to the GPU path. Paul Lewis face a similar problem and blogged about it
If you can provide a reduced demo, I will file the Bug against Chrome (or you can do it at http://m.crbug.com/new)