README.md

@ionic-native/google-maps document

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.

• How to generate API keys?

$> 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/[email protected])

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
  • GoogleMapControlOptions
  • GoogleMapGestureOptions
  • GoogleMapPreferenceOptions
• CameraPosition
• CircleOptions
• GeocoderRequest
• GeocoderResult
• GroundOverlayOptions
• ILatLng
• ILatLngBounds
• MarkerOptions
  • MarkerIcon
• MarkerClusterOptions
  • MarkerClusterIcon
  • MarkerLabel
• MyLocation
• MyLocationOptions
• PolygonOptions
• PolylineOptions
• TileOverlayOptions
• KmlOverlayOptions
• VisibleRegion
• ToDataUrlOptions
• EnvOptions
• StreetViewOptions
• StreetViewCameraPano
• StreetViewCameraPositionOption
• StreetViewControlOptions
• StreetViewGestureOptions
• StreetViewSetPositionOption
• StreetViewLocation
• StreetViewNavigationLink

Constants

• GoogleMapsAnimation
• MapType
• GoogleMapsEvent