Tutorial for Monaca
This page explains how to build your app with this plugin on Monaca.
###1. Apply for Monaca
In order to use this plugin, you need to choose at least the Developer plan.
###2. Add a project
Create a new project. For the test I selected the Minimum Template.
###3. Import this plugin
Open the Manage Cordova Plugins page from the menu Config > Manage Cordova Plugin...
Then put the URL of this plugin repository.
###5. Import or generate your KeyStore file
Export the KeyStore file from the menu Config > Android KeyStore Settings...
(1) Export the KeyStore
Export the KeyStore to obtain the SHA-1 fingerprint.
(2) Obtain the SHA-1 fingerprint
Open your Terminal software or Command prompt, then type the below:
keytool -list -v -keystore (KeyStore file) -alias android -storepass android -keypass android
###6. Upload the Developer and Distribution Certifications
In order to install your app on iOS, you need to upload the certification files.
Go to the page from the menu Configs > iOS Build Settings...
###7. Register your app package name and SHA-1 signature
Visit to Google APIs Console, then turn on Google Maps Android API v2 and Google Maps SDK for iOS.
Then move to the APIs & Auth > Credentials, and register your SHA-1 fingerprint and your package name.
###8. Set the API Keys In order to install the plugin with API keys, you need to set the API Keys that obtained above. Open the plugin configuration,
###9. Change the www/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
var map;
document.addEventListener("deviceready", function() {
var div = document.getElementById("map_canvas");
// Initialize the map view
map = plugin.google.maps.Map.getMap(div);
// Wait until the map is ready status.
map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
}, false);
function onMapReady() {
var button = document.getElementById("button");
button.addEventListener("click", onBtnClicked, false);
}
function onBtnClicked() {
map.showDialog();
}
</script>
</head>
<body>
<h3>PhoneGap-GoogleMaps-Plugin</h3>
<div style="width:100%;height:400px" id="map_canvas"></div>
<button id="button">Full Screen</button>
</body>
</html>###10. Build your app for Android
In order to run this plugin on iOS, you need to build (NO DEBUGGER available).
Select the Build App for Android.
And one more trap. Monaca uses the imported KeyStore only for Release Build.
Thus, you need to select Release Build at this time.
Select the Release build (Don't use the Debug build), then click the [Next] button.
After the building, you can install the APK.
Finally you can see the map on your Android device.
###11. Build your app for iOS
In order to run this plugin on iOS, you need to build (NO DEBUGGER available).
Select the Build App for iOS.
Then select Debug build.
Upload your provisioning profile file. The file can be download from the Apple Developer Center page.
![] (https://googledrive.com/host/0B1ECfqTCcLE8SkNKNnJNS1BEQk0/apple_member_page.png)
After the building your app, you can download the ipa file.
Connect your iOS device to your Mac, then open the ipa file with iTunes.
This youtube video explains how to install the ipa file to your iOS device. https://www.youtube.com/watch?v=dcmu5vHvV50
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