Map + Geolocation

Ionic Framework ionic-v3
1

Hi.
Now I’m studying ionic.And i want my project to show the location of the place. Along with the user’s current location as well But now I have a problem where I can not display GPS position.

$scope.loca = function (nameG, lat, lng) {
    window.localStorage.setItem("nameGarage", nameG);
    window.localStorage.setItem("lat", lat);
    window.localStorage.setItem("log", lng);
    }

  function initialize() {
    var myLatlng = new google.maps.LatLng(7.869238,98.374218);

    var nameGarage = window.localStorage.getItem("nameGarage");
    var lat = window.localStorage.getItem("lat");
    var long = window.localStorage.getItem("log");
    var locaGarage = new google.maps.LatLng(lat,long);

    var mapOptions = {
      center: locaGarage,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
      mapOptions);

    //Marker + infowindow + angularjs compiled ng-click
    var contentString = "<div><a ng-click='clickTest()'>"+nameGarage+"</a></div>";
    var compiled = $compile(contentString)($scope);

    var infowindow = new google.maps.InfoWindow({
      content: compiled[0]
    });

    var marker = new google.maps.Marker({
      position: locaGarage,
      map: map,
      title: ''
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });

    $scope.map = map;
  }
  google.maps.event.addDomListener(window, 'load', initialize);

  $scope.centerOnMe = function() {

    if(!$scope.map) {
      return;
    }

    $scope.loading = function(){
      $ionicLoading.show({
        content: 'Getting current location...',
        showBackdrop: false
      });
    };

    navigator.geolocation.getCurrentPosition(function(pos) {
      $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
      $scope.loading.hide();
    }, function(error) {
      alert('Unable to get location: ' + error.message);
    });
  };

  $scope.clickTest = function() {
    alert('Example of infowindow with ng-click')
  };
2

Hi @tanawit

Here is a code for Geolocation in Google Map

import { Component,ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';

declare var google;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers:[[Geolocation]]
})
export class HomePage {


    public lat:any;
    public lng:any;
    public latLng :any=[];

    @ViewChild('map') mapElement: ElementRef;
     map: any;

  constructor(public navCtrl: NavController,private  geolocation: Geolocation) {
    let watch = this.geolocation.watchPosition();
      watch.subscribe((position) => {
        this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        console.log("change position")
        });
  }
  ionViewDidLoad(){
   this.loadMap();
 }
  loadMap(){
    this.geolocation.getCurrentPosition().then((position) => {
        this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        console.log('sadsad',this.latLng);
        let mapOptions = {
          center: this.latLng,
          zoom:18,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        console.log('asdasdsad',mapOptions);
        this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
        this.addMarker();
        });
  }
  addMarker(){
    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: this.map.getCenter()
    });
    let content = "<h4>Your Location</h4>";
    this.addInfoWindow(marker, content);
  }
  addInfoWindow(marker, content){
    let infoWindow = new google.maps.InfoWindow({
      content: content
    });
    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.open(this.map, marker);
    });

  }
}

Hope this will solve your issue.

Feel free to mark it as a solution and you can always like the answer by clicking heart icon.

1 Like