Skip to content

Latest commit

 

History

History
85 lines (71 loc) · 3.95 KB

README.md

File metadata and controls

85 lines (71 loc) · 3.95 KB

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 = [
  {"lat": 41.79883, "lng": 140.75675},
  {"lat": 41.799240000000005, "lng": 140.75875000000002},
  {"lat": 41.797650000000004, "lng": 140.75905},
  {"lat": 41.79637, "lng": 140.76018000000002},
  {"lat": 41.79567, "lng": 140.75845},
  {"lat": 41.794470000000004, "lng": 140.75714000000002},
  {"lat": 41.795010000000005, "lng": 140.75611},
  {"lat": 41.79477000000001, "lng": 140.75484},
  {"lat": 41.79576, "lng": 140.75475},
  {"lat": 41.796150000000004, "lng": 140.75364000000002},
  {"lat": 41.79744, "lng": 140.75454000000002},
  {"lat": 41.79909000000001, "lng": 140.75465},
  {"lat": 41.79883, "lng": 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