How to use the @ionic-native/google-maps.GoogleMaps.create 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 fivethree-team / ionic-4-components / dist / google-maps / fesm2015 / fivethree-google-maps.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 / dist / google-maps / fesm5 / fivethree-google-maps.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 / 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 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-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 bharathirajatut / ionic4 / google-map-example / home.page.ts View on Github external
'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);

    let marker: Marker = this.map.addMarkerSync({
      title: 'Ionic',
      icon: 'blue',
      animation: 'DROP',
      position: {
        lat: 13.0380523,
        lng: 80.21371
      }
    });
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
      alert('clicked');
    });
  }
}