[IONIC] Using Google Maps on Ionic App - Adding Fixed Center Marker

Now that we have created an ionic app with Google Map, let's add some feature to it. Google Maps API itself supports dropping markers in the map, but there is no way make it fixed to the center like the Uber app(see image below). In this post, I'll write about how to add a fixed center marker. 

Let's Cut To The Chase

The codepen below is the final outcome of what I'll go thru in this post.

See the Pen Ionic Google Map With Center Marker by Old School Koder (@oldschoolcoder) on CodePen.

The Template

I'm using back the same html template as in my first post. For this post purpose, we'll need an extra SCSS style as shown below. This is where all the magic happens and also the hardest part in my opinion. You may modify the style below to suit your app design language.

  .center-marker {
    position: absolute;
    top:50%;left:50%;
    z-index:1;
    margin-left:-111px;
    margin-top:-42px;
    width: 200px;
    height: 30px;
    background-color: #0c60ee;
    color:#fff;
    border-radius: 5px;
    box-shadow: 10px 10px 5px #888888;
    border-radius: 14px;

    
    div.content{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding:5px 0px 5px 15px;
    }
    
    &:after,
    &::after {
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: 0%;
        content: '';
        width: 0;
        height: 0;
        border-top: solid 10px #0c60ee;
        border-left: solid 10px transparent;
        border-right: solid 10px transparent;
    }
}

Adding The Marker

After you get the CSS right, the rest is pretty straight forward and simple.

  
  .controller('locationCtrl', function($scope, $state) {
    //set scope variables
    $scope.currentCoord = {
      lat: 40.8091926,
      lng: -73.9586085
    }
    _initMap();
    _createCenterMarker();
    
    function _initMap() {
      //Initialise the map
      var mapOptions = {
        disableDefaultUI: true,
        center: new google.maps.LatLng($scope.currentCoord.lat, $scope.currentCoord.lng),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControl: true,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.LARGE
        }
      }
      $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
    }
    
    function _createCenterMarker() {
      //Create center marker
      var centerMarker = document.createElement('div');
      centerMarker.className = 'center-marker';
      var markerContent = document.createElement('div');
      markerContent.className='content';
      markerContent.innerText = 'Some Text Here';
      centerMarker.appendChild(markerContent);
      document.getElementById('map').appendChild(centerMarker);
    }
  })

As you can see in the controller above, it starts with initializing the map(check out my previous post for more detail). Then calling _createCenterMarker() function to create the center marker. The code inside this function is basically creating a <DIV> element with the center-marker css class and append it to the #map DOM.

That's it. Feel free to post questions below. I'll try to answer them as best as I can. Happy coding.