This plugin used for cordova-plugin-googlemaps.
Installation
In order to use this plugin, you need to generate API keys at the Google Developers Console. Please follow the instruction.
$> ionic cordova plugin add cordova-plugin-googlemaps
$> npm install --save @ionic-native/core@latest @ionic-native/google-maps@latest
Add API Keys to config.xml:
<widget ...> ... <preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="(api key)" /> <preference name="GOOGLE_MAPS_IOS_API_KEY" value="(api key)" /> ... </widget>
Basic usage (Use @ionic-native/google-maps@4.8.2)
import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, CameraPosition, MarkerOptions, Marker, Environment } from '@ionic-native/google-maps'; import { Component } from "@angular/core/"; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { map: GoogleMap; constructor() { } ionViewDidLoad() { this.loadMap(); } loadMap() { // This code is necessary for browser Environment.setEnv({ 'API_KEY_FOR_BROWSER_RELEASE': '(your api key for `https://`)', 'API_KEY_FOR_BROWSER_DEBUG': '(your api key for `http://`)' }); let mapOptions: GoogleMapOptions = { camera: { target: { lat: 43.0741904, lng: -89.3809802 }, zoom: 18, tilt: 30 } }; this.map = GoogleMaps.create('map_canvas', mapOptions); let marker: Marker = this.map.addMarkerSync({ title: 'Ionic', icon: 'blue', animation: 'DROP', position: { lat: 43.0741904, lng: -89.3809802 } }); marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => { alert('clicked'); }); } }
Understanding the @ionic-native/google-maps plugin
Before using the @ionic-native/google-maps plugin, reading this slides helps you to understand this plugin. Overview of @ionic-native/google-maps
Static Class
- GoogleMaps
- LocationService
- Geocoder
- Encoding
- Spherical
- Poly
- HtmlInfoWindow
- BaseClass
- BaseArrayClass
- LatLng
- LatLngBounds
- Environment
Instance Class
- GoogleMap
- Marker
- MarkerCluster
- Circle
- GroundOverlay
- Polyline
- Polygon
- KmlOverlay
- TileOverlay
- StreetViewPanorama
Interfaces
- GoogleMapOptions
- CameraPosition
- CircleOptions
- GeocoderRequest
- GeocoderResult
- GroundOverlayOptions
- ILatLng
- ILatLngBounds
- MarkerOptions
- MarkerClusterOptions
- MyLocation
- MyLocationOptions
- PolygonOptions
- PolylineOptions
- TileOverlayOptions
- KmlOverlayOptions
- VisibleRegion
- ToDataUrlOptions
- EnvOptions
- StreetViewOptions
- StreetViewCameraPano
- StreetViewCameraPositionOption
- StreetViewControlOptions
- StreetViewGestureOptions
- StreetViewSetPositionOption
- StreetViewLocation
- StreetViewNavigationLink