how to show google map by full screen in angularjs

Question

in my angular app I use ngMap for google maps and show div with specific dimension (width:400px and height: 300px). Now, in some case, I need to show map in full screen. Is there any way to add double click or button or something else for this?

<div id="map"></div>
<script>
  var lokacije = [];
        id_maps = [];
        for (key in data.smart_es) {
            lokacije.push({
                lat: data.smart_es[key].lat, 
                lng: data.smart_es[key].lng

            });

        }
        $scope.lokacije = lokacije;

        var mapOptions = {
            zoom: 6,
            center: new google.maps.LatLng(44.7007672, 15.4823411),
            //mapTypeId: google.maps.MapTypeId.TERRAIN
            styles: [{"featureType": "administrative", "elementType": "labels.text.fill", "stylers": [{"color": "#444444"}]}, {"featureType": "landscape", "elementType": "all", "stylers": [{"color": "#f2f2f2"}]}, {"featureType": "poi", "elementType": "all", "stylers": [{"visibility": "off"}]}, {"featureType": "poi.business", "elementType": "geometry.fill", "stylers": [{"visibility": "on"}]}, {"featureType": "road", "elementType": "all", "stylers": [{"saturation": -100}, {"lightness": 45}]}, {"featureType": "road.highway", "elementType": "all", "stylers": [{"visibility": "simplified"}]}, {"featureType": "road.arterial", "elementType": "labels.icon", "stylers": [{"visibility": "off"}]}, {"featureType": "transit", "elementType": "all", "stylers": [{"visibility": "on"}]}, {"featureType": "transit", "elementType": "labels", "stylers": [{"visibility": "off"}]}, {"featureType": "water", "elementType": "all", "stylers": [{"color": "#b2d0e3"}, {"visibility": "on"}]}]
        };

        $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);


//marker cluster

        //kraj marker cluster   

        var infoWindow = new google.maps.InfoWindow();
        $scope.markers = [];
        var infoWindow = new google.maps.InfoWindow();


        var getSmartnchIcon = function (smartnch) {
            if (smartnch.type == 'urban') {
                return 'assets/img/marker_urban.png';
            } else {
                return 'assets/img/marker_standard.png';
            }
        };

        var createMarker = function (info) {
            selectednches = info;
           var nchTypeIconUrl = getSmartnchIcon(info);
                if(info.lat !== null && info.lng !== null){
                    $scope.latitude = info.lat;
                    $scope.longitude = info.lng;

                var marker = new google.maps.Marker({
                    map: $scope.map,
                    position: new google.maps.LatLng($scope.latitude, $scope.longitude),
                    optimized: false,
                    title: info.city,
                    icon: ypeIconUrl,
                    id: info.id

                });
                }else{
                    $scope.latitude = 43.5450037;
                        $scope.longitude = 16.4615604;

                    var marker = new google.maps.Marker({
                        map: $scope.map,
                        position: new google.maps.LatLng($scope.latitude, $scope.longitude),
                        optimized: false,
                        title: info.city,
                        icon: ypeIconUrl,
                        id: info.id

                    }); 
                }
           marker.content =  '<div class="info-box-wrap">'
                                    +
                                    '<img src="" ng-click="openLightboxModal($index)"/>'
                                    +
                                    '<div class="info-box-text-wrap">'
                                    +
                                    '<h6 class="address">'
                                    +
                                    info.id + ' - ' + info.type
                                    +
                                    '</h6>'
                                    +
                                    '<p class="price">'
                                    +
                                    info.desc + '<br>'
                                    +
                                    info.last_report + '<br>'
                                    +
                                    '</p>'
                                    +
                                    '</div>'
                                    +
                                    '<div class="action-btns">'
                                    +
                                    '</div>' 
                                    + 

                                    '</div>'
                                    +
                                    '</div>' + marker.content;
            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.setContent('<div class="iw-title" style="color: #000;">' + '</div>' + marker.content);
                infoWindow.open($scope.map, marker);
            });
            $scope.markers.push(marker);
        };

        for (i = 0; i < lokacije.length; i++) {
            createMarker(lokacije[i]);
        }

        $scope.openInfoWindow = function (e, selectedMarker) {
            e.preventDefault();
            google.maps.event.trigger(selectedMarker, 'click');
        };
//marker clusterer
        var options = {
            imagePath: 'assets/img/i',
            gridSize: 50, 
            maxZoom: 10
        };
        var markerCluster = new MarkerClusterer($scope.map, $scope.markers, options);


        $scope.clearMarkers = function () {
            for (var i = 0; i < $scope.markers.length; i++) {
                $scope.markers[i].setMap(null);
            }
            $scope.markers.length = 0;
        };
</script>

Answer 1

Google maps offers the ability to show a fullscreen button check the documentation about controls.

The Fullscreen control offers the option to open the map in fullscreen mode. This control is enabled by default on mobile devices, and is disabled by default on desktop. Note: iOS doesn't support the fullscreen feature. The fullscreen control is therefore not visible on iOS devices.

So in your code you'd have to do this:

var mapOptions = {
     zoom: 6,
     center: new google.maps.LatLng(44.7007672, 15.4823411),
     //mapTypeId: google.maps.MapTypeId.TERRAIN
     styles: [{"featureType": "administrative", "elementType": "labels.text.fill", "stylers": [{"color": "#444444"}]}, {"featureType": "landscape", "elementType": "all", "stylers": [{"color": "#f2f2f2"}]}, {"featureType": "poi", "elementType": "all", "stylers": [{"visibility": "off"}]}, {"featureType": "poi.business", "elementType": "geometry.fill", "stylers": [{"visibility": "on"}]}, {"featureType": "road", "elementType": "all", "stylers": [{"saturation": -100}, {"lightness": 45}]}, {"featureType": "road.highway", "elementType": "all", "stylers": [{"visibility": "simplified"}]}, {"featureType": "road.arterial", "elementType": "labels.icon", "stylers": [{"visibility": "off"}]}, {"featureType": "transit", "elementType": "all", "stylers": [{"visibility": "on"}]}, {"featureType": "transit", "elementType": "labels", "stylers": [{"visibility": "off"}]}, {"featureType": "water", "elementType": "all", "stylers": [{"color": "#b2d0e3"}, {"visibility": "on"}]}],
     fullscreenControl:true
};

Answer 2

There is a fullscreen api you could use see Fullscreen API

function toggleFullScreen() {
  if (!document.fullscreenElement) {
   document.documentElement.requestFullscreen();
} else {
 if (document.exitFullscreen) {
  document.exitFullscreen(); 
}

} }