How to use the @ionic-native/google-maps.GoogleMapsEvent.MAP_READY function in @ionic-native/google-maps

To help you get started, we’ve selected a few @ionic-native/google-maps examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github IBM / Ionic-MFP-App / IonicMobileApp / src / pages / report-new / report-new.ts View on Github external
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();
        });
      });
    });
github UCL-INGI / StudUCLouvain / src / providers / map-services / map-service.ts View on Github external
//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);
github zyra / ionic-native-playground / src / components / google-map / google-map.ts View on Github external
.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));

      });
github fivethree-team / ionic-4-components / dist / google-maps / esm5 / lib / native / google-map-native.js View on Github external
function () {
        var _this = this;
        console.log("loading Map");
        this.map = GoogleMaps.create('map', {
            controls: {
                myLocation: true,
                myLocationButton: false,
                mapToolbar: false,
                compass: true,
            }
        });
        this.map.one(GoogleMapsEvent.MAP_READY).then(function () { return _this.zoomToMyLocation(); });
    };
    /**
github fivethree-team / ionic-4-components / dist / google-maps / esm2015 / lib / native / google-map-native.js View on Github external
loadMap() {
        console.log("loading Map");
        this.map = GoogleMaps.create('map', {
            controls: {
                myLocation: true,
                myLocationButton: false,
                mapToolbar: false,
                compass: true,
            }
        });
        this.map.one(GoogleMapsEvent.MAP_READY).then(() => this.zoomToMyLocation());
    }
    /**
github fivethree-team / ionic-4-components / projects / google-maps / src / lib / native / google-map-native.ts View on Github external
loadMap(): any {
        console.log("loading Map");
        this.map = GoogleMaps.create('map', {
            controls: {
                myLocation: true,
                myLocationButton: false,
                mapToolbar: false,
                compass: true,
            }
        });
        this.map.one(GoogleMapsEvent.MAP_READY).then(() => this.zoomToMyLocation());
    }
github IBM / Ionic-MFP-App / IonicMobileApp / src / pages / problem-detail / problem-detail.ts View on Github external
loadMap() {
    let loc = new LatLng(this.grievance.geoLocation.coordinates[1], this.grievance.geoLocation.coordinates[0]);
    let mapOptions: GoogleMapOptions= {
      camera: {
        target: loc,
        zoom: 15,
        tilt: 10
      }
    };
    this.map = GoogleMaps.create('map', mapOptions);
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      this.map.addMarker({
        title: 'Problem Location',
        position: loc
      }).then((marker: Marker) => {
        marker.showInfoWindow();
      }).catch(err => {
        console.log(err);
      });
    });
  }
}
github luisbahamonde / ionic-cabify-ui / src / pages / mapa / mapa.ts View on Github external
{
          "featureType": "water",
          "elementType": "labels.text.stroke",
          "stylers": [
            {
              "visibility": "off"
            }
          ]
        }
      ]
    };

    this.mapElement = document.getElementById('map');
    this.map = this.googleMaps.create(this.mapElement, mapOptions);

    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {

      this.map.setMyLocationEnabled(true);
      this.locateMe();

    });

    this.map.on(GoogleMapsEvent.CAMERA_MOVE_START).subscribe(() => {

      this.toggleTrans(true);
    });

    this.map.on(GoogleMapsEvent.CAMERA_MOVE_END).subscribe(() => {

      this.toggleTrans(false);
    });
  }
github fivethree-team / ionic-4-components / projects / google-maps / src / lib / native / google-maps-native.ts View on Github external
private loadMap(): any {
        this.map = GoogleMaps.create('map', {
            mapType: this.mapType,
            controls: {
                myLocation: true,
                myLocationButton: false,
                mapToolbar: false,
                compass: true,
            }
        });
        this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
            this.mapReady = true;
            if (this.zoomToLocationOnMapReady) {
                this.zoomToMyLocation(this.zoom);
            }
        });
    }
github yannbf / ionic3-components / src / providers / native-google-maps / native-google-maps.ts View on Github external
compass: true,
        myLocationButton: true,
        indoorPicker: true,
        zoom: true
      },
      gestures: {
        scroll: true,
        tilt: true,
        rotate: true,
        zoom: true
      },
      preferences: null
    };

    this.map = this.googleMaps.create(element.nativeElement, mapOptions);
    return this.map.one(GoogleMapsEvent.MAP_READY);
  }