CSS Zoom in Google Maps with iOS / Phonegap - ios

I have an iPad App which includes a Google Map. On that Map I can draw lines and place markers with Google Map API V3. All done with jQuery Mobile and PhoneGap.
The Problem I have is that I need a higher Zoom on the Map, than Google provides me.
I did that with setting CSS scale to the Google Map div. The Zoom is working.
The problem is:
If I place Markers on the zoomed Map they are not on the Place, where I click. They appear somewhere else on the map, because of the Div Zoom is changing coordinates.
If I scale the App on iPad, it is working. However I only want to scale the map and not the whole app.
Thanks for any help or ideas.

Use the <meta name="viewport"> tag to control scaling.
Don't use CSS zoom. Use the setZoom method on the Map object in the Maps API.
See the reference.

I would change your approach by using the zoom CSS property (which should be supported by iOS WebKit) instead of a CSS transform. So your FSuperZoom function becomes
function FSuperZoom(wert) {
ZoomWert = wert/10;
$("#map_canvas > div > div:first-child").css("zoom",ZoomWert);
}

Related

iOS How can I move googlemap marker to the front?

I added two marks on Google maps. Now the two markers are overlapping. I want the selected marker to be always in the front. That means when you select a marker this marker covers another marker. I looked at the Google maps development documentation, which does not provide the relevant API.
How can I do this?
A simple resolution is using the propertie zIndex, just set to 1.
customMark.zIndex = 1
For more informations, you can see https://developers.google.com/maps/documentation/ios-sdk/reference/interface_g_m_s_marker

Highmaps redraw bug after update points (with enabled zoom)

I found this highmaps version with lat/lon support (http://github.highcharts.com/latlon/highmaps.js) and then i created example to show what's happened when i try to zoom map and update points of the map dynamically. The common problem is that the points on the map are draggable (in the current zoom position) after update() method of point.
My example: http://jsfiddle.net/f97jkgz6/67/
I think function map.redraw() does not work properly, when zoom of map is enabled and more than default value.
Please, help me to find the solution of this problem.
Ok. I found the solution. This was a bug of highmaps library. Now with version 1.1.0 or higher redraw() function works properly.
This is updated fiddle: http://jsfiddle.net/f97jkgz6/69/

MapBox Marker Size on Zoom (ios sdk)

I'm trying to change the size of the marker image during a zoom event, so the image scales nicely while pinching/zooming.
I can't find anywhere how to do this, the closest I have come is to resize the marker image after the zoom event is completed (when the zoom level changes)
It would look a lot nicer if it would resize during the zoom event instead of after.
Any ideas?
Look into using RMMapLayer directly (RMMarker's superclass) which should scale when zoomed. RMShape and RMCircle are also a good, albeit not directly related, models for this since they represent shapes that "stick" to the map instead of points that don't scale. But the short answer is there is not built-in functionality for this.

Draw a grid onto an MKMapView

I'd like to draw a grid into my map, that represents the size of a tile at a certain zoom level. So for example I'd like to have a grid on my mapview that shows the outline of a zoom level 10 tile. So the outline of where this tile would be. No matter if the mapview itself is at zoom level 5 or 15, it should display the outline of where that tile would be placed.
The problem I have is how to calculate the proper rect that represents each visible "tile".
Any help is sooo much appreciated!!!
Or maybe the answer to following question would help:
How can I convert a MKMapRect to a MKTileOverlayPath?
I find that MapKit is way too limited when you want to start doing more and more with maps.
I would reccomend using Google Maps SDK for iOS: https://developers.google.com/maps/documentation/ios/start
and then using GMSTileLayer for the tiles:
https://developers.google.com/maps/documentation/ios/reference/interface_g_m_s_tile_layer
In the long run, replacing MapKit with Google maps gives you far more features and options and has better geolocation and reverse geolocation than Apple
You can also look at Mapbox. Between using TileMill to create a grid layer by setting the Map background to a pattern image, you could then only export zoom level 10 and either host it on Mapbox or export it to MBTiles format (SQLite-based). Then one of the Mapbox mobile toolkits could serve the tiles out as an overlay on your map.

Jumping markers on Google maps

I'm building a small site that uses Rails 4 and Gmaps4Rails gem to add a Google Map to the page.
It works quite well except that the markers that are placed on the map based on their geo coded location jump around when I pan or zoom the map. What I mean with this is that the same marker ends up at a slightly different location!
The markers are based on the map's boundary, i.e. I use Geokit to get the markers that are visible on the current map. This process is triggered every time the map becomes idle, i.e. stopped panning or zooming. So, the markers will be replaced - old ones are removed and new ones are added.
My expectation is that the same marker would end up at the same location every time it is added to the map. It does not! Is this a well known "feature" or maybe I have something wrong on my side?
I use Rails 4.0.1 and Gmaps4Rails 2.1.0.
Please let me know what other information I can share in order to find out what I might have done wrong on my side.
Thanks in advance!
Its a feature to prevent overlapping. Its documented in the code here.
You can customise or remove the behaviour, example:
handler = Gmaps.build('Google', { markers: { maxRandomDistance: null } });

Resources