Skip to content

Installation

Jump to bottom
Masashi Katsumata edited this page Mar 14, 2014 · 24 revisions

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. The below tutorial is explanation how to obtain the keys, and how to install this plugin. Please follow the each steps.

##Automatic Installation

$> cordova plugin add https://github.com/wf9a5m75/phonegap-googlemaps-plugin --variable API_KEY_FOR_ANDROID=xxx --variable API_KEY_FOR_IOS=xxx

##Tutorial Tutorial code: https://github.com/wf9a5m75/phonegap-googlemaps-plugin/tree/master/example/HelloMap

###1. Create a project

$> cordova create HelloMap com.example.myapp HelloMap

###2. Add platforms

$> cd HelloMap/
$> cordova platform add android
$> cordova platform add ios (You need to run on Mac OS X)

###3. (Only for Android) Link the project with Google Play Services library

$> cd $(your_android_sdk_path)/extras/google/google_play_services/libproject/google-play-services_lib/

// Confirm your available targets
$> android list target
Available Android targets:
-------------
id: 1 or "android-8"
    Name: Android 2.2
    Type: Platform
.....

// Update the Google-Play-Services library
// You might need to specify the target with the ID
$> android update lib-project -p . -t 1

//Go back to your project directory
$> cd HelloMap/platforms/android
$> android update -p . -l (relative_path_to_google_play_services)/extras/google/google_play_services/libproject/google-play-services_lib/
Updated  project.properties
Update local.properties

//Make sure there is a build.xml in the directory.
$> ls
AndroidManifest.xml  build.xml    libs     local.properties
proguard-project.txt proguard.txt project.properties README.txt
res    src

//Go back to your project directory

###4. (Only for Android) Displaying the debug certificate fingerprint

  • Find the keytool.
  • OS X and Linux: ~/.android/
  • Windows Vista and Windows 7: C:\Users\your_user_name.android
    *Display the SHA-1 fingerprint
//OS X and Linux
keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

//Windows Vista and Windows 7
keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

###5a. Obtain the Google Maps API Key for Android

###5b. Obtain the Google Maps API Key for iOS

##6. Install this plugin

$> cordova plugin add https://github.com/wf9a5m75/phonegap-googlemaps-plugin --variable API_KEY_FOR_ANDROID=xxx --variable API_KEY_FOR_IOS=xxxx

###7. 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>

###8. Copy & build

// Copy the www/* into the platforms/(android | ios)/www
$> cordova prepare

$> cordova build

###9. Run the code on your device

//For Android
$> cordova run android

//For iOS
$> cordova run ios

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