Why use this plugin?

Ramon Saraiva edited this page Jun 13, 2016 · 11 revisions

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!

Jump to...

Clone this wiki locally

cordova-plugin-googlemaps has some nice features. Let's introduce them briefly.


Similar code style

cordova-plugin-googlemaps provides JavaScript API, which is kind of similar with Google Maps JavaScript API v3. For instance, display a map with a location:

Google Maps JavaScript API v3

var map = new google.maps.Map(mapDiv);
var GOOGLE = new google.maps.LatLng(37.422858, -122.085065);
map.setCenter(GOOGLE);

cordova-plugin-googlemaps

var GOOGLE = new plugin.google.maps.LatLng(37.422858, -122.085065);
var map = plugin.google.maps.Map.getMap(mapDiv);
map.addEventListener(plugin.google.maps.event.MAP_READY, function() {
  map.setCenter(GOOGLE);
});

Simple code

Basic usage

If you want to display a location with specified zoom level, you just need to pass these parameters to the animateCamera() method.

map.animateCamera({
  target: new plugin.google.maps.LatLng(37.422858, -122.085065),
  zoom: 15
}, function() {
  console.log("The animation is done.");
});

img

Fit bounds

If you want to display the map with fitting a bound, pass an Array of LatLng, or an instance of LatLngBounds.

var GORYOKAKU_POINTS = [
  new plugin.google.maps.LatLng(41.79883, 140.75675),
  new plugin.google.maps.LatLng(41.799240000000005, 140.75875000000002),
  new plugin.google.maps.LatLng(41.797650000000004, 140.75905),
  new plugin.google.maps.LatLng(41.79637, 140.76018000000002),
  new plugin.google.maps.LatLng(41.79567, 140.75845),
  new plugin.google.maps.LatLng(41.794470000000004, 140.75714000000002),
  new plugin.google.maps.LatLng(41.795010000000005, 140.75611),
  new plugin.google.maps.LatLng(41.79477000000001, 140.75484),
  new plugin.google.maps.LatLng(41.79576, 140.75475),
  new plugin.google.maps.LatLng(41.796150000000004, 140.75364000000002),
  new plugin.google.maps.LatLng(41.79744, 140.75454000000002),
  new plugin.google.maps.LatLng(41.79909000000001, 140.75465),
  new plugin.google.maps.LatLng(41.79883, 140.75673)
];
map.animateCamera({
  'target': GORYOKAKU_POINTS
});

img


Original features

cordova-plugin-googlemaps has some original features, that Google Maps Android API v2 and Google Maps SDK for iOS do not provide them.

Display multiple lines in InfoWindow
img

Styled infoWindow
img

Base64 encoded and title for Marker
img

Load a KML file
img


Fuss-free

cordova-plugin-googlemaps takes care of all of things of Google Maps Mobile SDKs (as much as possible). And the most features of JavaScript API behaves the same working on both Android and iOS.
img