Getting google maps to work in a PhoneGap app on iOS

The Google maps guides should be enough to enable you to get a PhoneGap up and running with a Google Map however there are two gotchas that you should be aware of:

1) The div that hosts your map needs to have a real size. Initially I had set my div to have a height of 50% and width of 50% and although the map was being created it was 0 x 0 pixels so I couldn’t see it. Set your width or height on the containing div so that the map actually has space to render into.

2) Once I had the map running in my browser, I tried it out the iOS emulator and although the initial map would load, I was unable to interact with… No scrolling, zooming or swiping. Turns out that by default iOS will block access to external hosts so you need to add the following three hosts to the ExternalHosts property of your iOS project plist file.

Open your plist file, located in the Resources folder of your iOS wrapper app. If you don’t have a key called ‘ExternalHosts’ then add one. It should be of type Array. The three hosts should be added as entries in the Array. See the screenshot below of what my plist file looks like.

Image

Once I’d added this I was able to interact with the map through my iOS device.

Advertisements
This entry was posted in Uncategorized and tagged , , , , . Bookmark the permalink.

2 Responses to Getting google maps to work in a PhoneGap app on iOS

  1. Andrew says:

    Thank you! I had been struggling with getting it to work all of today until I came across your tip #1.

  2. moripr says:

    hi, managed to work maps on iOS using this tutorial but i could not understand your first tip. I want the map to show at 100% but if I use height and width 100% the map does not render (that is what you posted on your tip 1) My question is or what I did not understood was, how do I display map at 100%.

    Thanks and great tutorial

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s