Skip to content

Why use this plugin?

Masashi Katsumata edited this page Jul 17, 2014 · 12 revisions

phonegap-googlemaps-plugin has some features. Let's take a look briefly.


similar code

phonegap-googlemaps-plugin provides JavaScript API, which kind of similar with Google Maps JavaScript API v3. For example, initialize 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);

phonegap-googlemaps-plugin

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 to use

Basic usage

If you want to display the specific location and zoom, you just pass the location to the camera.

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

img

Fit to bounds

If you want to show the specific bounds, you just pass an array of LatLng or an instance of LatLngBounds class.

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

Also phonegap-googlemaps-plugin has some original features:

Multiple lines in InfoWindow
img

styling InfoWindow
img

Base64 icon and title for Marker
img

loading KML file
img


Fuss-free

phonegap-googlemaps-plugin takes care the all of things to use Google Maps mobile SDKs (as much as possible). You don't need to worry about events, caching the icon image, remove the object, something like that. And most features works the same behavior with the same code on Android and iOS.
img

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