Skip to content

Tutorial for Windows

Jump to bottom
Hirbod edited this page Oct 15, 2015 · 41 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. But you can not create iOS application on Windows.

The below tutorial explains how to create an Android application, and obtain a Google Maps API Key.

###0. Make sure Before getting start this tutorial, please confirm your environment.

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

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

It's also important to install the Android Support Repository, Library, Play Services and Google Repository.

###1. Create a project

C:\> mkdir C:\test
C:\> cd test
C:\test> cordova create HelloMap com.example.myapp HelloMap

###2. Add platforms

C:\test> cd HelloMap
C:\test\HelloMap> cordova platform add android

###3. Displaying the certificate fingerprint

Remember: In the following example, we are displaying the debug certificate. Be sure to do the same for the keystore you use to sign your app before publishing it.

  • Find the keytool
  • Windows Vista and Windows 7: C:\Users\your_user_name.android\

*Display the SHA-1 fingerprint

C:\test\HelloMap\platforms\android> keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

or

C:\Program Files (x86)\Java\[your_jdk_version]\bin> keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

img

###4. Obtain the Google Maps API Key for Android Go to Google APIs Console, then turn on Google Maps Android API v2

##5. Install this plugin Execute the below command.

npm (stable)

C:\test\HelloMap> cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_API_KEY_IS_HERE"

Github (current master)

C:\test\HelloMap> cordova plugin add https://github.com/phonegap-googlemaps-plugin/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_API_KEY_IS_HERE"

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

Using Visual studio (cordova tools)?

Edit your config.xml in the root of your proyect and add the following.

<vs:plugin name="plugin.google.maps">
	<param name="API_KEY_FOR_ANDROID" value="YOUR_API_KEY_IS_HERE" />
	<param name="API_KEY_FOR_IOS" value="YOUR_API_KEY_IS_HERE" />
</vs:plugin>

Visual studio will automatically fetch the plugin and configure it with the API keys. (https://msdn.microsoft.com/en-us/library/dn757051.aspx)

###6. Change the 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. Run the code on your device

C:\test\HelloMap> cordova build android
C:\test\HelloMap> cordova run android

demo

If you want to run this plugin on Android Emulator, please read this page. Run on Android Emulator

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

What's next?

There are many features! Check out the wiki page: https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki

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