daily pastebin goal
56%
SHARE
TWEET

Untitled

a guest Nov 17th, 2017 58 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { Component } from '@angular/core';
  2. import { IonicPage, NavController, NavParams } from 'ionic-angular';
  3. import { Geolocation ,GeolocationOptions } from '@ionic-native/geolocation';
  4.  
  5.  
  6. import {
  7.  GoogleMaps,
  8.  GoogleMap,
  9.  GoogleMapsEvent,
  10.  LatLng,
  11.  CameraPosition,
  12.  MarkerOptions,
  13.  Marker
  14. } from '@ionic-native/google-maps';      
  15.  
  16.  
  17. @IonicPage()
  18. @Component({
  19.   selector: 'page-google-map-test',
  20.   templateUrl: 'google-map-test.html',
  21. })
  22.  
  23. export class GoogleMapTestPage {
  24.  
  25.   constructor(...,public googleMaps: GoogleMaps,private geolocation : Geolocation) {
  26.   }
  27.  
  28.  ionViewDidLoad() {
  29.     this.mapHandler2();      
  30.   }
  31.  
  32.  
  33.   mapHandler2(){
  34.  
  35.     // create a new map by passing HTMLElement
  36.      let element: HTMLElement = document.getElementById('map');
  37.  
  38.      let map: GoogleMap = this.googleMaps.create(element);
  39.  
  40.      let LatLang: LatLng = new LatLng(43.0741904,-89.3809802);
  41.  
  42.  
  43.           // create CameraPosition
  44.        let position: any = {
  45.           target: LatLang,    
  46.           zoom: 18,
  47.           tilt: 30
  48.        };    
  49.  
  50.  
  51.         map.one(GoogleMapsEvent.MAP_READY).then(() => {
  52.          console.log('Map is ready!');
  53.          // Now you can add elements to the map like the marker
  54.           map.moveCamera(position);
  55.  
  56.          // create new marker
  57.         let markerOptions:any = {
  58.             position: LatLng,
  59.             title: 'Ionic'
  60.         };
  61.  
  62.         const marker:any = map.addMarker(markerOptions)
  63.             .then((marker: Marker) => {
  64.                 marker.showInfoWindow();
  65.             });
  66.  
  67.  
  68.          this.geolocation.getCurrentPosition().then((position) => {
  69.  
  70.              let LatLang: LatLng = new LatLng(position.coords.latitude,position.coords.longitude);
  71.  
  72.  
  73.               map.setCameraTarget(LatLang);
  74.               map.setCameraZoom(18);
  75.  
  76.  
  77.                  // create new marker
  78.                   let markerOptions:any = {
  79.                       position: LatLng,
  80.                       title: 'You Are Here'
  81.                   };
  82.  
  83.                 const marker:any = map.addMarker(markerOptions)
  84.                       .then((marker: Marker) => {
  85.                           marker.showInfoWindow();
  86.                   });      
  87.  
  88.  
  89.           }, (err) => {
  90.             console.log(err);
  91.             alert('location error');            
  92.           });
  93.  
  94.  
  95.  
  96.         });  // End of GoogleMapsEvent.MAP_READY
  97.  
  98.   }
  99.  
  100. }
RAW Paste Data
Top