[IONIC] Using Google Map on Ionic App - Getting Current Location

In the next part of Using Google Map on Ionic App, we are going to put a button to get the current user location. We'll also going to draw a radius circle around the current position. If you are here first time, feel free to check out part one and part two. Lets get started by showing the final result

Let's Cut To The Chase

All the codes in this post will be available in codepen as embeded below

See the Pen Ionic Google Map With Get Current Position Control by Old School Koder (@oldschoolcoder) on CodePen.

The Template

We'll be using back the same html template in the first post. We'll be only adding two css classes. We can do that by adding it to scss\ionic.app.scss file. The two css classes below is for the button which we'll use it for user to click to detect the current location.

.map-button {
  background-color: #fff;
  border: none;
  outline: none;
  width: 38px;
  height: 38px;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  cursor: pointer;
  margin-right: 10px;
  padding: 0px;
}

.map-icon {
  margin: 9px;
  width: 18px;
  height: 18px;
  background-image: url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-2x.png);
  background-size: 180px 18px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
  
}

TIP: You may need to setup SCSS in your ionic project for SCSS to work properly. If you haven't setup SCSS, you can refer to this post

The Main Course

We'll still be using the same controller method in my first and second post on google maps with ionic framework. For this post we'll be introducing three new functions in the controller.

    var _currentPositionMarker;
    var _currentPositionCircle;

    function _createCurrentPosControl() {
      //create get current position button
      var controlDiv = document.createElement('div');
      var button = document.createElement('button');
      button.className = 'map-button';
      var icon = document.createElement('div');
      icon.className = 'map-icon';
      controlDiv.appendChild(button);
      button.appendChild(icon);

      //add onclick event
      button.addEventListener('click', function() {
        _getCurrentPosition();
      })

      controlDiv.index = 1;
      $scope.map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
    }

    function _createCurrentPositionMarker() {
      var currentPosition = {
        lat: $scope.currentCoord.lat,
        lng: $scope.currentCoord.lng
      };
      
      if (!_currentPositionMarker) {
        // creating the current location marker.
        _currentPositionMarker = new google.maps.Marker({
          icon: new google.maps.MarkerImage('https://maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',
            new google.maps.Size(22, 22),
            new google.maps.Point(0, 18),
            new google.maps.Point(11, 11)),
          title: 'Current Location'
        });

        // Add circle overlay and bind to marker
        _currentPositionCircle = new google.maps.Circle({
          radius: 300, //meters
          fillColor: '#E0ECF8',
          fillOpacity: '0.5',
          strokeColor: '#58ACFA',
          strokeOpacity: '0.5',
          strokeWeight: '2'
        });

      }
      _currentPositionMarker.setPosition(currentPosition);
      _currentPositionMarker.setMap($scope.map);
      _currentPositionCircle.setMap($scope.map);
      _currentPositionCircle.bindTo('center', _currentPositionMarker, 'position');
    }

    function _getCurrentPosition() {
      ionic.Platform.ready(function() {
        navigator.geolocation.getCurrentPosition(function(position) {
          $scope.currentCoord.lat = position.coords.latitude;
          $scope.currentCoord.lng = position.coords.longitude;

          var currentPosition = $scope.currentCoord;

          $scope.map.panTo($scope.currentCoord);
          $scope.map.setZoom(15);
          
          _createCurrentPositionMarker();
        })
        
      });
    }

The first function is _createCurrentPosControl(); which does the following,

1. Create a button with the css class map-button and map-icon (line 6-12)
2. Add an onclick event to the button which will call _getCurrentPosition() (line 15-17)
3. Add the button to the google map control with position right bottom. (line 20)

TIPS : Refer Google's API documentation for other position for the control button.

The second function will be _getCurrentPosition(). As the name implies, it gets the longitude and the latitude coordinates of the device.

For the third function, _createCurrentPositionMarker(), it does the following,

1. Create a Google Map Marker object (line 31-37)
2. Create a Google Map Circle object (line 40-47)
3. Set the position of the Marker object(with the coordinates from _getCurrentPosition()) and bind the Circle object to the center of the Marker. (Line 50 - 53)

TIPS : Refer Google's API documentation for detail API for Marker and Circle object.

That's it. Should be pretty straight forward. This should concludes the google maps series on Ionic. Feel free to drop any question below.