Cordova GoogleMaps plugin for iOS and Android

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

###Quick install

Plugin is finally available on npm
Before you install, make sure you've read the instructions

npm (current stable 1.3.9)

$> 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/phonegap-googlemaps-plugin/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 plugin.google.maps #before 1.4.0
$> cordova plugin rm cordova-plugin-googlemaps #since 1.4+
$> 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.

###Information Cordova-iOS 4.X and WKWebView are supported from version 1.4+. There is currently no npm package of 1.4 (work in progress) but if you need this feature, you can grab our master, which is currently considered stable. (We're still fixing bugs, so you might wait until we push 1.4.0 to npm)

###Last release information

v.1.3.9 - 04/Jan/2016 Happy new year!

Fixed a few bugs with Crosswalk, White-Screen Problems.
Added "maxAddressLines" for Geocoder (Android, iOS had it already). Check "lines" inside of the extras array.
Updated Google Maps SDK for iOS to 1.11.1

Please check the new Tutorial for Crosswalk

I recommend to set settings for Crosswalk to 15+ and remove android-platform (cordova platform rm android) and re-install it. No patches required anymore to run with crosswalk. It also has some nice performance boosts, as setting translucent isn't required anymore. (in my test-cases)

v.1.3.6 - 07/Dec/2015

Fixed some small bugs
Updated Google Maps SDK for iOS to 1.11.0
Will fix some bugs on iOS 9
with BITCODE support
fixed blank map problems

Check out the release notes.

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

Introduction
Installation
- Automatic Installation
- Tutorials
- Upgrade
  - Just re-install this plugin
Terms of Services
Map
Marker
- Add a Marker
- Show InfoWindow
- Add a marker with multiple line
- callback
- Simple Icon
- Scaled Icon
- Text Styling
- Base64 Encoded Icon
- Remove the marker
- Click a marker
- Click an infoWindow
- Create a marker draggable
- Drag Events
- Create a flat marker
- Marker Class Reference
Circle
- Add a circle
- callback
- Remove the circle
- Circle Class Reference
Polyline
- Add a polyline
- callback
- Remove the polyline
- Polyline Class Reference
Polygon
- Add a polygon
- Click a polygon
- callback
- Remove the polygon
- Polygon Class Reference
Tile Overlay
- Add a tile overlay
- TileOverlay Class Reference
Ground Overlay
- Add a ground overlay
- GroundOverlay Class Reference
Kml Overlay
- Add a kml overlay
- KmlOverlay Class Reference
LatLng
- Create a LatLng object
- LatLng Class Reference
LatLngBounds
- Create a LatLngBounds object
- LatLngBounds Class Reference
CameraPosition
- CameraPosition Class Reference
Location
- Location Class Reference
Geocoder
- Geocoding
- Reverse geocoding
- Geocoder Class Reference
BaseClass
- BaseClass Reference
External Service
- Launch the navigation application

Join the official community

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

###Chat Join our online chat at

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

###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 of methods are improved.

However the new verion might be affect your code. At least some event names and some method names are changed.

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

License

propelinc/cordova-plugin-googlemaps

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages