Skip to content

Tutorial for Mac

Jump to bottom
Masashi Katsumata edited this page May 13, 2014 · 51 revisions

The phonegap-googlemaps-plugin, gives you the ability to work with Native maps in 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 explains how to obtain the API keys, and how to install this plugin. Please follow each steps.

Requirement

Developing an application with the Google Maps SDK for iOS requires the following:

  • Xcode 5.0 or later.
  • iOS SDK 7.0 or later.

###0. Requirements Before getting started you need to set up your environment properly.

  • Set the environment path to the *Android SDK Platform-tools and Android SDK Build-tools
  • Install Apache Ant
  • Set the JAVA_HOME to the environment path
$> which ant
/usr/local/bin/ant

$> which android
/android-sdk/tools/android

$> which git
/opt/local/bin/git

$> which unzip
/usr/bin/unzip

$> echo $JAVA_HOME
/System/Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Home

$> cordova -v
3.4.0-0.1.3

Also you should install the latest versions. the latest versions of Android SDK platform-tools and Android SDK build-tools

###1. Create a project

$> cordova create HelloMap com.example.myapp HelloMap

###2. Add platforms

$> cd HelloMap/
$> cordova platform add android ios

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

  • 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

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

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

###5. Install this plugin

$> cordova plugin add plugin.google.maps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

*In case of PhoneGap, you also need to use the Cordova CLI. Check out PhoneGap Usage.

###6. 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">
    var map;
    document.addEventListener("deviceready", function() {
      var button = document.getElementById("button");
      button.addEventListener("click", onBtnClicked, false);

      var div = document.getElementById("map_canvas");
      map = plugin.google.maps.Map.getMap(div);
    }, 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:

$> cordova run android

preview

For iOS, you need to install Node.js modules once before running.

$> npm -g install ios-sim ios-deploy

then type these commands:

$> cordova run ios

preview

If you get "map is null!" error...

This issues occurs because Google Maps Android API v2 uses Google Play Services library which provides as isolated APK.

Install the below apk. https://play.google.com/store/apps/details?id=com.google.android.gms

For more detail, refer the stack overflow Running Google Maps v2 on the Android emulator

If you get the blow Java Error...

Example:

Java Error
The meta-data tag in your app's AndroidManifest.xml does not have the right value.  Expected 4323000 but found 4323030.  You must have the following declaration within the <application> element:     <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" />

Your Google Play Services apk is old. Please update to the latest version.

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