It took me few hours, spread over a number of weekends, to figure out the solution to the following problem so I am recording it in case it’s useful to someone else out there.
I am using PhoneGap, jQuery Mobile, and the Google Maps control for a mobile app I am building. While I was debugging the app using Chrome on my MacBook, the control was configured exactly as I wanted it. It looked like this…
Note the zoom in/out buttons at the top-left. Exactly what I wanted. However, when running the same code on the iPhone, those same buttons weren’t coming up 🙁
Here’s the code I original used to initialize the Google Maps control…
$('#map').gmap({ 'zoom': 13, 'mapTypeControl': false, 'navigationControl': true, 'streetViewControl': false, 'disableDefaultUI': true, });
And here’re the few more options I had to introduce in order to make the zoom buttons appear on the iPhone as well.
$('#map').gmap({ 'zoom': 13, 'mapTypeControl': false, 'navigationControl': true, 'streetViewControl': false, 'disableDefaultUI': true, 'zoomControl': true, 'zoomControlOptions': { 'position': google.maps.ControlPosition.TL, 'style': google.maps.ZoomControlStyle.SMALL } });
Even though I asked for the position to be at the “top-left”, they still appear at the bottom but at least they are there now 🙂 Oh, and they do look different, which is good since on iPhone the buttons need to be different. So I am guessing that the Google Maps control is doing different things based on the browser/environment it detects.
I found the solution by trying the relevant options listed in Google’s documentation for maps.