@ionic-native/google-maps v4.8.2

Ionic Native
1

I’m glad to announce new version @ionic-native/google-maps v4.8.2

This version is compatible with the cordova-plugin-googlemaps v2.3.1.
In the v2.3.1, you can generate overlay instances without callback.

In the @ionic-native/google-maps v4.8.2, you can generate overlay instances with xxxxSync() methods.

And you can also skip GoogleMapsEvent.MAP_READY event for the most cases.

let map: GoogleMap;

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

  let marker: Marker = this.map.addMarkerSync({
                           position: {lat: ..., lng: ...}
                       });
  marker.showInfoWindow();
}

The following below methods are available.

  • addMarkerSync()
  • addMarkerClusterSync()
  • addCircleSync()
  • addPolygonSync()
  • addPolylineSync()
  • addTileOverlaySync()
  • addGroundOverlaySync()

StreetView!

capture
capture.jpg540×960 207 KB 

class StreetViewPage {

  panorama: StreetViewPanorama;
  map: GoogleMap;
  marker: Marker;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad StreetViewPage');
    this.loadMap();
  }

  loadMap() {
    let initialPos: ILatLng = {lat: 42.345573, lng: -71.098326};

    // Create a map after the view is loaded.
    // (platform is already ready in app.component.ts)
    this.panorama = GoogleMaps.createPanorama('pano_canvas', {
      camera: {
        target: initialPos
      }
    });
    this.map = GoogleMaps.create('map_canvas', {
      camera: {
        target: initialPos,
        zoom: 17
      }
    });

    this.marker = this.map.addMarkerSync({
      flat: true,
      position: initialPos
    });

    // Move the marker position when the panorama camera has been moved.
    // (this.marker.position = this.panorama.position)
    this.panorama.bindTo('position', this.marker);

    // Move the map camera when the panorama camera has been moved.
    this.panorama.on(GoogleMapsEvent.PANORAMA_LOCATION_CHANGE).subscribe((params:any[]) => {
      let location: StreetViewLocation = params[0];
      this.map.animateCamera({
        target: location.latLng,
        duration: 1000
      });
    });

    // Change the marker bearing when the panorama camera is panning.
    this.panorama.on(GoogleMapsEvent.PANORAMA_CAMERA_CHANGE).subscribe((params: any[]) => {
      let camera: StreetViewCameraPosition = params[0];
      this.marker.setRotation(camera.bearing - 180);
    });

  }

}

The document page is not ready, but the cordova-plugin-googlemaps document is ready.

Enjoy!

1 Like