Skip to content

Tutorial for CrossWalk (Android)

Jump to bottom
Masashi Katsumata edited this page Apr 7, 2015 · 9 revisions

Intel Crosswalk-project can generate Apache Cordova application, but that includes Chromium engine inside the app. The benefit of this is that JavaScript runs on V8 JavaScript engine, which is the same as Chrome Browser, your JavaScript runs faster than regular WebView JavaScript engine.

Since Crosswalk version 14.42.326.0, it supports the transparent background. This is requirement condition to use this plugin. Although the Crosswalk version 14.42.326.0 is not stable version, but you can use this plugin at least.

The PhoneGap-GoogleMaps-Plugin will support Crosswalk Project, but it's under the beta version currently. It means there might be some bugs in the plugin.

To use this plugin with Crosswalk Project, please follow the below instructions.

###0. Requirement

$> npm install -g plugman

###1. Download Crosswalk and initialize

Download the crosswalk project files from https://download.01.org/crosswalk/releases/crosswalk/android/canary/

Use the upper version than version 14.42.326.0. Then unzip them.

After that, you need to move the crosswalk-webview-14.42.xxx-arm directory into crosswalk-cordova-14.42.xxx-arm as xwalk_core_library.

$> wget https://download.01.org/crosswalk/releases/crosswalk/android/canary/14.42.329.0/arm/crosswalk-cordova-14.42.329.0-arm.zip
$> wget https://download.01.org/crosswalk/releases/crosswalk/android/canary/14.42.329.0/arm/crosswalk-webview-14.42.329.0-arm.zip
$> unzip crosswalk-cordova-14.42.329.0-arm.zip
$> unzip crosswalk-webview-14.42.329.0-arm.zip

$> cd crosswalk-cordova-14.42.329.0-arm/
$> mv ../crosswalk-webview-14.42.329.0-arm xwalk_core_library

###2. Create a project

$> cd crosswalk-cordova-14.42.329.0-arm/
$> ./bin/create HelloMap com.example.myapp HelloMap

###3. Obtain the Google Maps API Key for Android

  • Find the keytool.
  • OS X and Linux: ~/.android/

*Display the SHA-1 fingerprint

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

img

  • 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]

img

###4. Install this plugin

$> cd HelloMap/
$> plugman install --platform android --project . https://github.com/wf9a5m75/phonegap-googlemaps-plugin#test --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE"

###5. Change the AndroidManifest.xml and HelloMap.java

In order to change the background color of the WebView as transparent, you need to modify the application settings by your hand.

Open AndroidManifest.xml, find android:theme="@android:style/Theme.Black.NoTitleBar", then change to android:theme="@android:style/Theme.Translucent.NoTitleBar".

After that, open src/com/example/myapp/HelloMap.java, then add the following two lines like the below image.

@Override
protected void onXWalkReady() {
    XWalkPreferences.setValue(XWalkPreferences.ANIMATABLE_XWALK_VIEW, false);  // <!-- Add this line

    super.init();

    this.appView.setZOrderOnTop(true);  // <!-- Add this line

    // Set by <content src="index.html" /> in config.xml
    loadUrl(launchUrl);
}

###6. Change the assets/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>

###7. Build and Run For Android, just type these commands:

$> cd HelloMap/
$> ./cordova/run android

preview

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

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!

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

Clone this wiki locally