Need a Google Map in Ionic App

Ionic Framework ionic-v3
1

Hi,

I tried to implement a Google Map in my Ionic App. I used cordova-plugin-geolocation, it works well in browser but doesn’t work in Android real device. Please someone help me.

Code:

<div id="map" data-tap-disabled="true">
</div>

CSS:

.scroll {
height: 100%;
}

#map {
width: 100%;
height: 40%;
}

Index.html:

Controller.js :
.controller(‘ContactCtrl’, function($scope, $stateParams, $state, $cordovaGeolocation, $ionicLoading, $ionicPlatform, $compiler) {
ionic.Platform.ready(function(){

var options = {timeout: 10000, enableHighAccuracy: false};

$cordovaGeolocation.getCurrentPosition(options).then(function(position){

var latLng = new google.maps.LatLng(11.12926829,77.33410209);

var mapOptions = {
  center: latLng,
  zoom: 18,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var compiled = $compile($scope);

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

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

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

    $scope.map = map;

}, function(error){
console.log("Could not get location");
console.log(error);

});
})