I'm venturing into a new world of hybrid mobile development to test the waters and I have a new project I'm currently starting. I can't divulge the specifics yet, but the very first part is to get Google Maps working. I had a harder time doing this than I thought.
At first I tried using the recently released phonegap-googlemaps-plugin and got it semi-successfully working. I had it working in both iOS and Android but then came to find out that you can't use the Places API to find POIs on the map. That won't work so I reverted to using the old Javascript API to show in 'browser' mode instead of the native SDK. I came across Implement Google Maps API on PhoneGap Using the Device API and struggled for 2 days on trying to figure out exactly why it wasn't working. It was a combination of type, outdatedness, failure to copy/paste, and missing CSS variables. I'm going to recreate it to make "spoonfed" useful.
You can see this entire project at https://github.com/kacole2/jsmap1 or look at this Gist for the entire code: Phonegap Cordova Geolocation with Google Maps Javascript API v3
1. Assuming you have Phonegap installed and configured correctly, lets create a new project
phonegap create jsmap1 com.kendrickcoleman.jsmap1 jsmap1
2. Lets add some plugin repositories that allow Phonegap to access the native APIs of the phone for Geolocation, accelerometer, and orientation
phonegap local plugin add org.apache.cordova.geolocation phonegap local plugin add org.apache.cordova.device-motion phonegap local plugin add org.apache.cordova.device-orientation
3. Go get your Google Maps API
- go to https://console.developers.google.com and login
- Make sure the Google Maps JavaScript API v3 is set to ON
- Create a Public Google Maps API Browser Key.
- Credentials
- New Public Key
- Browser Key
- Leave it blank unless you know what domain this will be accessed from
- Click Create
4. Edit your CSS, HTML, and Javscript to the following.
5. Now you can spin up the emulator or run phonegap serve to create a listener and use your Phonegap application to debug everything in real time.