Tutorial for Monaca

Masashi Katsumata edited this page Mar 29, 2016 · 10 revisions

Join the official community

New versions will be announced through the official community. Stay tune!

Do you have a question or feature request?

Feel free to ask me on the issues tracker.

Or on the official community is also welcome!

Jump to...

Clone this wiki locally

Since Monaca cloud uses android-4.1 platform, you can not build with the latest map plugin code. Masashi has been discussing with Monaca. (03/29/2016)

Monaca is a cloud development platform for PhoneGap / Apache Cordova.

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.

4. Configure your package name

Open the menu Config->Android App Settings..., then enter your application package name.

As well for iOS, set your application bundle name.

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, then put your API KEY line by line.


9. Change the www/index.html

<!DOCTYPE html>
    <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() {
    <div style="width:100%;height:400px" id="map_canvas"></div>
    <button id="button">Full Screen</button>

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.

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