I am using HERE Maps to show a map letting users choose a location of interest. It works fine on desktop, but on mobile devices I am experiencing some problems.
On Android devices, if I create a map using
var map = new nokia.maps.map.Display(document.getElementById("map"), {
// Initial center and zoom level of the map
center: startCoordinate,
zoomLevel: 5,
components: [
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.ScaleBar()
]
}
);
the browser freezes after a few seconds. You can test this at karmap.com; try to scroll down to the very bottom to find the map. If I remove the code shown above the browser won't freeze anymore (but I won't get the map, of course).
Another problem occurs, when loading the page on iOS devices; in the form at the bottom you can find an input box named "Place of Birth". After typing 3 letters or more I start an ajax request to find suitable city names. This doesn't work if I use the following code (right under the code snippet to create the map):
map.removeComponent(map.getComponentById("zoom.MouseWheel"));
map.set("baseMapType", map.SATELLITE); // Activates satellite imagery on the display
If I comment that code out, the ajax calls work fine.
For me, that is some strange side effect! Does anyone have a clue what is going on?
Thanks for any help or advice!
Related
I have an issue with the Forms Maps.
When I drag the map and move away to a different screen, I see the map back to the last location set using "MoveToRegion" when I resume back the map screen. As per the documentation, setting MoveToLastRegionOnLayoutChange to False should prevent this behavior but it doesn't.
I didn't specifically test this property for screen rotation, but Renderer doesn't change on app sleep and resume.
Tried with below:
Xamarin Forms V16.6.000.1062
Android V8.1
Visual Studio 2019 V16.6.3
UPDATE: I realized that it is not merely a case of Page resume, but the page is rendered as below:
mapInstance = MapsPage.SelfInstance ?? new MapsPage();
Detail = new NavigationPage(mapInstance);
Here, I store the page instance in SelfInstance the first time it is instantiated, so the page is not initialized again. Result below:
Here is the link to code sample I created with above result.
Reported this on XF Github page:
https://github.com/xamarin/Xamarin.Forms/issues/11488
I am having an issue in the android emulator where my svg/icon Layers are showing as black. This sometimes effects highway/road markers as well as my map markers. The plugin is currently using the default marker, but I have also provided my own png file and they both suffer from this problem.
Sometimes zooming in will fix it (as can be seen for one of the markers in the image below)
I am yet to test this on any other device and have only been using an android emulator from android studio.
Some extra details
I am running nativescript with Angular (and TS), I have commented out any extraneous code that adds markers etc and am still having the issue on highway number markers (example below). Here is my template:
<StackLayout class="page">
<ContentView height="100%" width="100%">
<Mapbox
accessToken="token"
mapStyle="streets"
[latitude]=defaultLocation.latitude
[longitude]=defaultLocation.longitude
hideCompass="true"
zoomLevel="8"
showUserLocation="false"
disableZoom="false"
disableRotation="false"
disableScroll="false"
disableTilt="false"
(mapReady)="onMapReady($event)">
</Mapbox>
</ContentView>
</StackLayout>
It seems like I can trigger this with a call to removeMarkers and addMarkers with this code:
updateUserMarker(loc) {
console.log("updating user location marker with loc: ", loc)
this.map.removeMarkers([this.userMarker.id]);
this.userMarker.lat = loc.latitude;
this.userMarker.lng = loc.longitude;
this.map.addMarkers([this.userMarker]);
}
I had the same problem and I removed Android Studio and reinstalled and downloaded a new OS image and it seems to have fixed the problem.
Not sure you still have this issue but thought I would put this here for any new users with the issue as this was the only post I could find relating to this.
If you are running this on an emulator then make sure to go to it's settings and select the following :
OpenGL ES renderer as "SwiftShader"
OpenGL ES API Level as "Renderer maximum"
and restart the android emulator.
I'm Using sencha Architect (sencha touch 2) and when creating a simple infowindow in a google map it displays all the google controls (undo arrow, +, -, zoom controls) next to the closing 'x'.
This only bugs in android (4.0.3) browser, in chrome or firefox on my pc works fine.
I uploaded the Sencha Architect project here
Here's the code for creating and displaying the infowindow.
var map = this.getGoogleMap().getMap();
var center = map.getCenter();
var iw = new google.maps.InfoWindow();
iw.setContent('<p> Test </p>');
iw.setPosition(center);
iw.open(map);
Any ideas on why is this happening?
EDIT:
Here's how it looks
I got rid of the unwanted icons by adding 2 br tags after the content.
Like so: "iw.setContent('Test [br][br]');" (The [] must be replaced with a <>)
This bug came with the last google maps update aprox. a month ago.
I decided I'd give the new Visual Refresh that was announced at Google I/O 2013 a try, since all it takes to get the new basemaps/UI is a single property/query string.
JavaScript API
function initializeMap() {
var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
google.maps.visualRefresh = true;
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
-- OR --
Static Maps API
https://maps.googleapis.com/maps/api/staticmap?center=1600%20Amphitheatre%20Parkway%20Mountain%20View,%20CA%2094043&size=400x400&sensor=false
And it worked great, my maps now use the new basemap tiles and UI.
However since the change, when I open an InfoWindow on a mobile device (using the Javascript API), the close button in the top right hand corner of it doesn't seem to respond any longer. Has any one else observed this? I'm trying to find out if it's a bug with my code or with Google's.
UPDATE:
Here's a basic Fiddle I'm using to test with. Works on Chrome, IE & Firefox but not on mobile devices (Only been able to try android so far)
http://jsfiddle.net/vG3WE/1
I noticed the same effect on some Apple devices. Consider this as a very dirty hack, but if you don't want to wait until this bug is fixed, you can implement the close event yourself so that it should also work on mobile devices:
First of all you need to define an ID for your info window content (you'll need that later on)
var contentString = '<div id="infowindowContent">You should be able to close me</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
Then you need to attach a listener for the domready-event of this infowindow. Cause if this event is fired, you know that the info window is attached to the DOM and you can start implementing the following hack:
google.maps.event.addListener(infowindow, 'domready', function() {
var infowindowCloseButton = $($($("#infowindowContent").parents()[2]).children()[0]);
infowindowCloseButton.click(function(){
infowindow.close();
});
});
What we do is pretty simple: We just navigate to the close button of the infowindow and attach a mouseclick event to close this infowindow.
I put together a small example:
http://chatmap.eu/playground/closeInfoWindows.html
As I said: It is very dirty but it worked for me.
Im writing a small webapp based on the idea of openspot for training proposal.
When I open the map with my desktop pc everything is fine, but when I open it with my HTC Desire and add a marker the map hangs.
You can find a demo here (in german)
http://park-a-lot.de
Just go to "eintragen" and set a marker.
Then go hack and click on "parkplatze".
You'll see the issue.
Its ok that the toolbar at the top hides when you move the map, because of a jqtouch bug with Google maps.
Thank you in advance.
This solution may help. I know it works great in the ipod safari browser and Opera on an HTC Android phone.
http://nickjohnson.com/b/google-maps-v3-how-to-quickly-add-many-markers
Having lots of markers on the map does really slow it down on android. One thing you can try is to only show the relevant markers, i.e. those that are in the bounds of the map. In my case this made the map much less sluggish:
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
for (id in stations) {
var marker = stations[id].marker;
var isVisible = marker.getVisible();
var shouldBeVisible = bounds.contains(stations[id].latLng);
if (isVisible != shouldBeVisible) {
marker.setVisible(shouldBeVisible);
}
}
});