anu2g / cordova-plugin-googlemaps

Google Maps plugin for Cordova

Cordova GoogleMaps plugin for iOS and Android

This plugin is a thin wrapper for Google Maps Android API and Google Maps SDK for iOS. Both PhoneGap and Apache Cordova are supported.

---

###Quick install

Before you install, make sure you've read the instructions

npm (current stable 1.4.0)

$> cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

Github (current master, potentially unstable)

$> cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

If you re-install the plugin, please always remove the plugin first, then remove the SDK

$> cordova plugin rm cordova-plugin-googlemaps
$> cordova plugin rm com.googlemaps.ios
$> cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

The SDK-Plugin won't be uninstalled automatically and you will stuck on an old version.

Last release information

v1.4.0 - 04/Nov/2016

• Lots of bugs are fixed.
• Improve performance (especially adding markers using the same url)
• Updated Google Maps SDK for iOS to 2.1.1
• StyledMapType is available.

Quick demo

<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);
}

function onBtnClicked() {

  // Move to the position with animation
  map.animateCamera({
    target: {lat: 37.422359, lng: -122.084344},
    zoom: 17,
    tilt: 60,
    bearing: 140,
    duration: 5000
  }, function() {

    // Add a maker
    map.addMarker({
      position: {lat: 37.422359, lng: -122.084344},
      title: "Welecome to \n" +
             "Cordova GoogleMaps plugin for iOS and Android",
      snippet: "This plugin is awesome!",
      animation: plugin.google.maps.Animation.BOUNCE
    }, function(marker) {

      // Show the info window
      marker.showInfoWindow();

      // Catch the click event
      marker.on(plugin.google.maps.event.INFO_CLICK, function() {

        // To do something...
        alert("Hello world!");

      });
    });
  });
}
</script>

---

Documentation

All documentations are here!!

• Installation

  • Automatic Installation
  • Tutorials
    • Tutorial for Windows
    • Tutorial for Mac/Linux
    • PhoneGap Usage
    • Tutorial for Crosswalk
    • Tutorial for Monaca (Cloud building service)
  • Upgrade
    • Just re-install this plugin

• Terms of Services

Classes

• Map
• Marker
• Circle
• Polyline
• Polygon
• Tile Overlay
• Ground Overlay
• Kml Overlay
• LatLng
• LatLngBounds
• CameraPosition
• Location
• Geocoder
• BaseClass
• External Service

If you want to use crosswalk, just follow this easy documentation. Install Plugin with Crosswalk

---

Join the official community

New versions will be announced through the official community. Stay tuned!

Chat

Join our online chat at

Example

You can see an example here. (old version, but all most the same)

phonegap-googlemaps-plugin-v1.2.5.apk

$> adb install phonegap-googlemaps-plugin-v1.2.5.apk

---

Version 2.0 Beta

The new version 2.0 supports multiple maps on multiple pages. Lots of issues are fixed, and the performance are improved.

However, the documentation is not enough for the version 2.0. For the reason, the new version is still in the beta. If you are interested in it, you can try the new version.

For more details, please read here. https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/v2-beta

You can try the demo application from here.

https://github.com/mapsplugin/v2.0-demo

---

Version 2.0 Beta Roadmap

The version 1.x will be shutdown in 2017. The date is not decided yet, but we release the v1.4.0 is the last version of v1.x

For more details are announced through the Official community