Ionic GoogleMaps Directive

Step 1. Add this to your index.html file.

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>

Step 2. Add this to your directive.js file.

   .directive('map', function () {
        return {
            restrict: 'E',
            scope: {
                onCreate: '&'
            },
            link: function ($scope, $element, $attr) {
                var directionDisplay;
                var directionsService = new google.maps.DirectionsService();

                function initialize() {
                    var latlng = new google.maps.LatLng(51.764696,5.526042);
                    directionsDisplay = new google.maps.DirectionsRenderer();

                    var mapOptions = {
                        zoom: 8,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        mapTypeControl: false

                    };
                    var map = new google.maps.Map($element[0], mapOptions);
                    directionsDisplay.setMap(map);
                    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
                    var marker = new google.maps.Marker({
                        position: latlng,
                        map: map,
                        title:"My location"
                    });

                    $scope.onCreate({map: map});
                    // Stop the side bar from dragging when mousedown/tapdown on the map
                    google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
                        e.preventDefault();
                        return false;
                    });

                    calcRoute();
                }

                function calcRoute() {
                    var start = "28.6100,77.2300";
                    var end = "37.38, -122.09";
                    var request = {
                        origin: start,
                        destination: end,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    };
                    directionsService.route(request, function (response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setDirections(response);
                        }
                    });
                }

                if (document.readyState === "complete") {
                    initialize();
                } else {
                    google.maps.event.addDomListener(window, 'load', initialize);
                }
            }
        }
    });

Step 3. Add this to your style.css file.

map {
    display: block;
    width: 100%;
    height: 100%;
}

.scroll {
    height: 100%;
}
.profile-info-right p {
    max-width: 185px;
}

And finally  to your template :-

        <map on-create="mapCreated(map)"></map>