Zoom buttons for the Google Maps control on the iPhone

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.