Skip to content

Tutorial for CrossWalk Webview Plugin (Android)

Jump to bottom
Hirbod edited this page Sep 1, 2015 · 23 revisions

###0. Requirement

$> npm install cordova -g
(Cordova CLI >= 5.0.0)

###1. Create a project

$> cordova create HelloMap com.example.myapp HelloMap
$> cd HelloMap & cordova platform add android

###2. Add Crosswalk webview plugin

$> cordova plugin add cordova-plugin-crosswalk-webview

Just add following lines to your config.xml (android section)

<preference name="xwalkVersion" value="14+" />

You can refer to https://www.npmjs.com/package/cordova-plugin-crosswalk-webview#configure to configure Crosswalk version, requires Crosswalk 14+

###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/
$> cordova plugin add https://github.com/wf9a5m75/phonegap-googlemaps-plugin#test --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE"

###5. Change the AndroidManifest.xml, MainActivity.java and XWalkWebViewEngine.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 HelloMap/platforms/android/src/com/example/map/MainActivity.java, then add the following two lines.

import org.xwalk.core.XWalkPreferences;  // <!-- Add this line

public class MainActivity extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        XWalkPreferences.setValue(XWalkPreferences.ANIMATABLE_XWALK_VIEW, false);  // <!-- Add this line
        super.onCreate(savedInstanceState);
        // Set by <content src="index.html" /> in config.xml
        loadUrl(launchUrl);
    }
}

And then, open HelloMap/platforms/android/src/org/crosswalk/engine/XWalkWebViewEngine.java, then add the following line.

    private void initWebViewSettings() {
        webView.setVerticalScrollBarEnabled(false);
        webView.setZOrderOnTop(true);  // <!-- Add this line
    }

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

###8. Troubleshooting

Thus it is not related to this plugin, there is currently a bug with Crosswalk 14+. If you get something like

platforms/android/src/org/crosswalk/engine/XWalkCordovaCookieManager.java:22: error: cannot find symbol
import org.xwalk.core.internal.XWalkCookieManager;

open platforms/android/src/org/crosswalk/XWalkCordovaCookieManager.java and change

import org.xwalk.core.internal.XWalkCookieManager;

to

import org.xwalk.core.XWalkCookieManager;

This will fix the error message on compile.

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