GoogleMap class

May 2, 2020 ยท View on GitHub

This class extends BaseClass.

Contents

Overview

Create a map

You can create a google maps (map instance) using GoogleMaps.create() after the deviceready event.

import { Platform } from 'ionic-angular';
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent
} from '@ionic-native/google-maps';

export class MapPage {

  map: GoogleMap;

  constructor(private platform: Platform) {
      this.platform.ready().then(() => {
      this.loadMap();
    });
  }

  loadmap() {
    this.map = GoogleMaps.create('map_canvas');

    // The `MAP_READY` event notifies the native map view is fully ready.
    this.map.one(GoogleMapsEvent.MAP_READY).then(this.onMapReady.bind(this));
  }

  onMapReady() {
    console.log('map is ready!');
  }
}

How does the plugin work?

Before using this plugin, please understand how this plugin work.

  • App background becomes transparent

    This plugin embeds native Google Maps view under the browser view. Because of this, this plugin changes the application background as transparent. If you want to set the background color, you need to use Environment.setBackgroundColor().

  • Manipulate like a HTML element!

    The biggest benefit of this plugin is you can put/cover any HTML elements on the map, just like HTML!

    The maps plugin recognizes all touches before browser, calculates who should receive the touch event, then pass it.

  • What's camera?

    The native Google Map APIs have a 3D map internally. We can only see the map through the camera.

Events

  • User interface events

    A map instance tells us what UI changes are occurred through these events:

    • MAP_READY
    • MAP_CLICK
    • MAP_LONG_CLICK
    • CAMERA_MOVE_START (including map dragging)
    • CAMERA_MOVE_MOVE
    • CAMERA_MOVE_END
    • MY_LOCATION_BUTTON_CLICK
    • MY_LOCATION_CLICK
    • POI_CLICK

    The above events passes with event information in parameter, such as where is clicked.

    map.on(GoogleMapsEvent.MAP_CLICK).subscribe((params: any[]) => {
  let latLng: LatLng = params[0];
  alert(latLng + " is clicked!");
});

    And also, all events passes the map instance to the last argument. This allows you to write your event listener code in a separate place.

    map.on(GoogleMapsEvent.MAP_CLICK).subscribe(this.onMapClick.bind(this));

onMapClick(params: any[]) {
  let latLng: LatLng = params[0];
  let map: GoogleMap = params[1];  // <-- You can get the target of MAP_CLICK event

  map.addMarker({
    position: latLng
  });
}

  • MVC status change events

    The map class extends BaseClass. The BaseClass has set() and get() methods. This is very useful methods.

    If you set a value through set() method, you can listen the (key)_changed event.

    The benefit of this is you can write your code Model-View-Controller separately.

    map.on(GoogleMapsEvent.MAP_CLICK).subscribe((params: any[]) => {
  let latLng: LatLng = params[0];
  map.set("clickPosition", latLng);
});

map.on("clickPosition_changed").subscribe((params: any[]) => {
  let oldValue: LatLng = params[0];
  let newValue: LatLng = params[1];
  let target: Map = params[2];

  // clickPosition is even with newValue
  let clickPosition: LatLng = target.get("clickPosition");
});

Camera

  • Changing the camera position

    This plugin has two basic methods:

    • map.animateCamera() changes the camera position with animation.
    • map.moveCamera() changes the camera position without animation.
    map.animateCamera({
  target: {lat: 37.422359, lng: -122.084344},
  zoom: 17,
  tilt: 60,
  bearing: 140,
  duration: 5000
}).then(() => {
  //alert("Camera target has been changed");
});

    Other methods animateCameraZoomIn(), moveCameraZoomIn(), setCameraTarget()...etc use one of the above methods internally.

    Since this plugin stops other methods execution during the camera moving, this is bad performance code.

    Bad performance code

    map.setCameraZoom(10);
map.setCameraTilt(30);
map.setCameraBearing(45);

    Recommended way is using one method as much as possible.

    Good performance code

    map.moveCamera({
  zoom: 10,
  tilt: 30,
  bearing: 45
});

  • Get the camera position

    You can get the camera position through these method anytime.

    • map.getCameraPosition() // Returns center, zoom, bearing, and tilt values
    • map.getCameraZoom()
    • map.getCameraTarget()
    • map.getCameraBearing()
    • map.getCameraTilt()

    Also you can listen the CAMERA_MOVE events.

    map.on(GoogleMapsEvent.CAMERA_MOVE).subscribe((params: any[]) => {
  let cameraPosition: CameraPosition<LatLng> = params[0];
  console.log(cameraPosition.target);
});

    If you want to listen particular property, you can do like this:

    map.on('camera_target_changed').subscribe((params: any[]) => {
  let latLng: LatLng = params[0];
  console.log("map center = " + latLng);
});

API Reference

Class methods

Event