Installation
With the phonegap-googlemaps-plugin, you can add a map into your application. The plugin automatically handles access to Google Maps mobile SDKs.
To install this plugin, you need to prepare your API keys for both Google Maps Android API v2 and Google Maps iOS SDK. The below tutorial is explanation how to obtain the keys, and how to install this plugin. Please follow the each steps.
##Automatic Installation
$> cordova plugin add https://github.com/wf9a5m75/phonegap-googlemaps-plugin --variable API_KEY_FOR_ANDROID=xxx --variable API_KEY_FOR_IOS=xxx##Tutorial Tutorial code: https://github.com/wf9a5m75/phonegap-googlemaps-plugin/tree/master/example/HelloMap
###1. Create a project
$> cordova create HelloMap com.example.myapp HelloMap###2. Add platforms
$> cd HelloMap/
$> cordova platform add android ios###3. (Only for Android) Link the project with Google Play Services library
$> cd $(your_android_sdk_path)/extras/google/google_play_services/libproject/google-play-services_lib/
$> android update lib-project -p .
//Go back to your project directory
$> cd HelloMap/platforms/android
$> android update -p . -l (relative_path_to_google_play_services)/extras/google/google_play_services/libproject/google-play-services_lib/
$> cd ../../###4. (Only for Android) Displaying the debug certificate fingerprint
- Find the keytool.
- OS X and Linux: ~/.android/
- Windows Vista and Windows 7: C:\Users\your_user_name.android
*Display the SHA-1 fingerprint
//OS X and Linux
keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
//Windows Vista and Windows 7
keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android###5a. Obtain the Google Maps API Key for Android
- Go to Google APIs Console.
- Register your project
- Turn on Google Maps Android API v2
- Go to API Access page.
- Click [Create New Android Key] button
- In the resulting dialog, enter the SHA-1 fingerprint, then a semicolon, then your application's package name.
- Write down the API Key See the official document: Get an Android certificate and the Google Maps API key
###5b. Obtain the Google Maps API Key for iOS
- Go to Google APIs Console.
- Register your project
- Turn on Google Maps SDK for iOS
- Click [Create new iOS key] button
- Enter one or more bundle identifiers as listed in your application's .plist file(com.example.myapp)
- Write down the API Key See the official document: Obtaining an API Key
##6. Install this plugin
$> cordova plugin add https://github.com/wf9a5m75/phonegap-googlemaps-plugin --variable API_KEY_FOR_ANDROID=xxx --variable API_KEY_FOR_IOS=xxxx###7. Change the www/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", function() {
var button = document.getElementById("button");
button.addEventListener("click", onBtnClicked, false);
}, false);
function onBtnClicked() {
var map = plugin.google.maps.Map.getMap();
map.addEventListener(plugin.google.maps.event.MAP_READY, onMapInit);
}
function onMapInit(map) {
map.showDialog();
}
</script>
</head>
<body>
<button id="button">Init a map</button>
</body>
</html>###8. Copy & build
// Copy the www/* into the platforms/(android | ios)/www
$> cordova prepare
$> cordova build###9. Run the code on your device
//For Android
$> cordova run android
//For iOS
$> cordova run iosNew versions will be announced through the official community. Stay tune!
Feel free to ask me on the issues tracker.
Or on the official community is also welcome!
New version 2.0-beta2 is available.
The cordova-googlemaps-plugin v2.0 has more faster, more features.
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/tree/master/v2.0.0/README.md