-
Notifications
You must be signed in to change notification settings - Fork 914
Tutorial for Windows
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. But you can not create iOS application on Windows.
The below tutorial explains how to create an Android application, and obtain a Google Maps API Key.
###0. Make sure Before getting start this tutorial, please confirm your environment.
- Set the environment path to the *Android SDK Platform-tools and Android SDK Build-tools
- Install Apache Ant
- Set the JAVA_HOME to the environment path
Also you should install the latest versions of Android SDK Platform-tools and Android SDK Build-tools.
###1. Create a project
C:\> mkdir C:\test
C:\> cd test
C:\test> cordova create HelloMap com.example.myapp HelloMap
###2. Add platforms
C:\test> cd HelloMap
C:\test\HelloMap> cordova platform add android
###3. Displaying the debug certificate fingerprint
- Find the keytool
- Windows Vista and Windows 7: C:\Users\your_user_name.android\
*Display the SHA-1 fingerprint
C:\test\HelloMap\platforms\android> keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
###4. 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
##5. Install this plugin Execute the below command.
C:\test\HelloMap> cordova plugin add plugin.google.maps --variable API_KEY_FOR_ANDROID="YOUR_API_KEY_IS_HERE"
###6. 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>
###7. Run the code on your device
C:\test\HelloMap> cordova run android
If you get an error, feel free to ask me on the official community or the issue list.
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
New 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