Google Maps slow when markers on it - android

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);
}
}
});

Related

Osmdroid map blurred in android devices

I am using osmdroid library for having osm maps functionality in my app.
compile 'org.osmdroid:osmdroid-android:6.0.2'
Everything is working fine functionality wise, but I have one issue related to map appearance. A website is also being developed for the same functionality as of the app and in the web they are also using osm maps.
Now the issue is the map looks much clear on the website while it looks blurred on the android devices.
See the attached screenshots
Mobile Screenshot
Web Screenshot
Below is my code for loading the maps in my android app.
binding.map.setTileSource(TileSourceFactory.MAPNIK);
binding.map.setTilesScaledToDpi(true);
binding.map.setBuiltInZoomControls(false);
binding.map.setMultiTouchControls(true);
if (gpsTracker.canGetLocation()) {
if (gpsTracker.getLocation() != null) {
currentLocation = gpsTracker.getLocation();
centreLocation = gpsTracker.getLocation();
addCurrentLocationMarker(currentLocation);
getMarkersInCurrentLocation(currentLocation);
} else {
gpsTracker.showSettingsAlert();
}
} else {
gpsTracker.showSettingsAlert();
//Toast.makeText(getApplicationContext(), "Unable to get current location", Toast.LENGTH_LONG).show();
}
Is this related to the tile source that I am using ?
This is due to binding.map.setTilesScaledToDpi(true) which scales the tiles depending to your device resolution.
Try without: the image will be clean, but labels should be too small, less readable.
AFAIK, no good solution yet: OpenStreetMap tiles are not available at the resolution of current mobile devices.
-- EDIT 12/12/2018 --
See https://github.com/osmdroid/osmdroid/issues/1217

How disable local googlemap zoom which appears on android tablet

Hello,
I would like to disable the local zoom of google map on tablet android.
I use the click for another use, also i don't want to see this partiel zoom.(you can see photo of my android tablet)
I have no problem with my PC or my iPhone anywhere.
what can I do ?
Thanks a lot.
Trachy
Here is the configuartion of the map:
var centreCarte = new google.maps.LatLng(latcentrecarto, longcentrecarto);
var optionsCarte = {
zoom: zoominitialcarto,
center: centreCarte,
zoomControl: false,
mapTypeControl: true,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDoubleClickZoom: true,
clickableIcons:false,
streetViewControl:false,
draggable:false,
};
mymap = new google.maps.Map(document.getElementById("map"), optionsCarte);
I think my problem concern the "one finger zoom".
But in fact, I don't realise application specially for Android, I use googlemap Api http://maps.google.com/maps/api/js?sensor=false
Also I can't use mymap.getUiSettings().setZoomGesturesEnabled(false); because this function is not in the API.
I don't really understand why "the one finger zoom" can be active on the map, because I don't load GV3 API Android.
An idea to solve the problem ? Thanks Trachy
The function mymap.getUiSettings().setZoomGesturesEnabled(false) will not work in your code because this function is for Android API not in javaScript.
Here is the documentation of Google Maps JavaScript API that shows the different controls.
For more information, check this related SO question:
Toggling zooming and panning ability on Google Maps.
Disabling pinch-zoom on google maps

HERE Maps on Android freezes browser, breaking ajax requests on iOS

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!

Infowindow bug in android browser. Sencha touch

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.

Unable to close InfoWindow after switching to new Visual Refresh

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.

Categories

Resources