ionic-team / ionic-native-google-maps

Google maps plugin for Ionic Native
Other
221 stars 125 forks source link

By the way, you can write your code without `geolocation` plugin. #97

Closed ghost closed 5 years ago

ghost commented 5 years ago
import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, Marker, LocationService, ILatLng } from '@ionic-native/google-maps';

@Component({
  selector: 'page-map',
  templateUrl: 'map.html'
})

export class MapPage {

  map: GoogleMap;
  latLng: ILatLng;

  loading: boolean;
  error: boolean;

  constructor(public navCtrl: NavController) {
    console.log('Map');
    this.loading = true;
    this.error = false;
  }

  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap(){

    LocationService.getMyLocation({ enableHighAccuracy: true }).then((position) => {
      this.latLng = position.latLng;

      let mapOptions: GoogleMapOptions = {
        camera: {
          target: this.latLng,
          zoom: 18
        },
        controls: {
          myLocationButton: true,
          zoom: true
        }
      };

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

      // Now you can use all methods safely.
      this.getPosition();
      this.loading = false;
      this.error = false;

    })
    .catch(error =>{
      alert('error map ready');
      console.log(error);
    });

  }

  getPosition() {

    let markerIcon = {
        url: "assets/imgs/checkpoint.png",
        size: {
            width: 60,
            height: 60,
        }
    }

    this.map.moveCamera({
      target: this.latLng
    }).then(() => {

      let marker: Marker = this.map.addMarkerSync({
          title: ' Wrong Way',
          snippet: ' Un lugar fantástico',
          icon: markerIcon,
          animation: 'DROP',
          position: this.latLng
        });
      });

      marker.on(GoogleMapsEvent.INFO_CLICK).subscribe(() => {
        alert('click marker');
      });
    });

  }

}

Originally posted by @wf9a5m75 in https://github.com/ionic-team/ionic-native-google-maps/issues/34#issuecomment-391899504

ghost commented 5 years ago

Remove marker ..multiple markers are placed in it,..i need a single marker

wf9a5m75 commented 5 years ago

I can't understand what you are asking about.

wf9a5m75 commented 5 years ago

ping