How to use @ionic-native/google-maps - 10 common examples

createMap() {
    // TODO need to store/retrieve prevLoc in app preferences/local storage
    let prevLoc = new LatLng(13.0768342, 77.7886087);
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: prevLoc,
        zoom: 15,
        tilt: 10
      }
    };
    this.map = GoogleMaps.create('map', mapOptions);
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      console.log('--> ReportNewPage: Map is Ready To Use');
      this.mapReady = true;
      // https://stackoverflow.com/questions/4537164/google-maps-v3-set-single-marker-point-on-map-click
      this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe( event => {
        this.location = event[0];
        console.log('--> ReportNewPage: User clicked location = ' + event[0]);
        this.map.clear();
        this.map.addMarker({
          title: 'Selected location',
          position: event[0]
        }).then((marker: Marker) => {
          this.autoFillAddress();
          marker.showInfoWindow();
        });
      });

createMap() {
    // TODO need to store/retrieve prevLoc in app preferences/local storage
    let prevLoc = new LatLng(13.0768342, 77.7886087);
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: prevLoc,
        zoom: 15,
        tilt: 10
      }
    };
    this.map = GoogleMaps.create('map', mapOptions);
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      console.log('--> ReportNewPage: Map is Ready To Use');
      this.mapReady = true;
      // https://stackoverflow.com/questions/4537164/google-maps-v3-set-single-marker-point-on-map-click
      this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe( event => {
        this.location = event[0];
        console.log('--> ReportNewPage: User clicked location = ' + event[0]);
        this.map.clear();
        this.map.addMarker({
          title: 'Selected location',
          position: event[0]
        }).then((marker: Marker) => {
          this.autoFillAddress();
          marker.showInfoWindow();
        });
      });
    });

//let latLng = new LatLng(position.coords.latitude, position.coords.longitude);
          let latLng = position.latLng;
          let mapOptions = {
            center: latLng,
            zoom: 15,
            mapTypeId: GoogleMapsMapTypeId.ROADMAP
          }
          // create CameraPosition
          let camPos: CameraPosition = {
            target: latLng,
            zoom: 15
          };
          //this.map = new GoogleMap(this.mapElement, mapOptions);
          this.map = GoogleMaps.create(this.mapElement, mapOptions);
          this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
            console.log('Map is ready!');
            this.map.moveCamera(camPos);
            resolve(true);
          });
        }, (error) => {
          console.log("Map error initDeviceMap : " + error);

createMap() {
    // TODO need to store/retrieve prevLoc in app preferences/local storage
    let prevLoc = new LatLng(13.0768342, 77.7886087);
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: prevLoc,
        zoom: 15,
        tilt: 10
      }
    };
    this.map = GoogleMaps.create('map', mapOptions);
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      console.log('--> ReportNewPage: Map is Ready To Use');
      this.mapReady = true;
      // https://stackoverflow.com/questions/4537164/google-maps-v3-set-single-marker-point-on-map-click
      this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe( event => {
        this.location = event[0];
        console.log('--> ReportNewPage: User clicked location = ' + event[0]);
        this.map.clear();

this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      console.log('--> ReportNewPage: Map is Ready To Use');
      this.mapReady = true;
      // https://stackoverflow.com/questions/4537164/google-maps-v3-set-single-marker-point-on-map-click
      this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe( event => {
        this.location = event[0];
        console.log('--> ReportNewPage: User clicked location = ' + event[0]);
        this.map.clear();
        this.map.addMarker({
          title: 'Selected location',
          position: event[0]
        }).then((marker: Marker) => {
          this.autoFillAddress();
          marker.showInfoWindow();
        });
      });
    });
  }

(position) => {
          console.log("initDeviceMap - geolocation answered");
          this.userLocation = new MapLocation( "Ma Position",
                                      "",
                                      String(position.latLng.lat),
                                      String(position.latLng.lng),
                                      "MYPOS");

          //let latLng = new LatLng(position.coords.latitude, position.coords.longitude);
          let latLng = position.latLng;
          let mapOptions = {
            center: latLng,
            zoom: 15,
            mapTypeId: GoogleMapsMapTypeId.ROADMAP
          }
          // create CameraPosition
          let camPos: CameraPosition = {
            target: latLng,
            zoom: 15
          };
          //this.map = new GoogleMap(this.mapElement, mapOptions);
          this.map = GoogleMaps.create(this.mapElement, mapOptions);
          this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
            console.log('Map is ready!');
            this.map.moveCamera(camPos);
            resolve(true);
          });
        }, (error) => {
          console.log("Map error initDeviceMap : " + error);

return new Promise((resolve, reject) => {
      LocationService.getMyLocation().then(
        (position) => {
          console.log("initDeviceMap - geolocation answered");
          this.userLocation = new MapLocation( "Ma Position",
                                      "",
                                      String(position.latLng.lat),
                                      String(position.latLng.lng),
                                      "MYPOS");

          //let latLng = new LatLng(position.coords.latitude, position.coords.longitude);
          let latLng = position.latLng;
          let mapOptions = {
            center: latLng,
            zoom: 15,
            mapTypeId: GoogleMapsMapTypeId.ROADMAP
          }
          // create CameraPosition

(locations: any) => {
            // process all markers
            for (var i = 0; i < locations.length; i++) {
              let location = locations[i];

              // create new marker
              let markerOptions: MarkerOptions = {
                position: new LatLng(location.outlet_latitude, location.outlet_longitude),
                title: location.outlet_business,
                snippet: `${location.outlet_name}, ${location.outlet_suburb}, ${location.outlet_postcode}`+
                `\r\nMonday: ${location.outlet_business_hour_mon !== null ? location.outlet_business_hour_mon : "N/A"}`+
                `\r\nTuesday: ${location.outlet_business_hour_tue !== null ? location.outlet_business_hour_tue : "N/A"}`+
                `\r\nWednesday: ${location.outlet_business_hour_wed !== null ? location.outlet_business_hour_wed : "N/A"}`+
                `\r\nThursday: ${location.outlet_business_hour_thur !== null ? location.outlet_business_hour_thur : "N/A"}`+
                `\r\nFriday: ${location.outlet_business_hour_fri !== null ? location.outlet_business_hour_fri : "N/A"}`+
                `\r\nSaturday: ${location.outlet_business_hour_sat !== null ? location.outlet_business_hour_sat : "N/A"}`+
                `\r\nSunday: ${location.outlet_business_hour_sun !== null ? location.outlet_business_hour_sun : "N/A"}`
              };
              // add marker to list to be added
              this.map.addMarker(markerOptions);
            }
            loader.dismiss();
          }
        , error => {

loadMap() {

    // This code is necessary for browser
    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': 'API-KEY',
      'API_KEY_FOR_BROWSER_DEBUG': 'API-KEY'
    });

    let mapOptions: GoogleMapOptions = {
      camera: {
         target: {
          lat: 13.0380523,
          lng: 80.21371
         },
         zoom: 18,
         tilt: 30
       }
    };

    this.map = GoogleMaps.create('map', mapOptions);

.then(() => {
        this.map = this.googleMaps.create(this.mapContainer, this.options);

        this.map.one(GoogleMapsEvent.MAP_READY)
          .then(() => {
            console.log('Map ready fired', this.map);

            this.mapReady.emit(this.map);
            this.isInit = true;
          });

        this.map.on(GoogleMapsEvent.MAP_CLICK)
          .subscribe(data => this.mapClick.emit(data));

      });