I am using google map for my site but I can not see the full screen feauture on the map. How can I activate and why I can't see it?

I have add following option to map:

var map = new google.maps.Map(document.getElementById('googleMap'), {
                zoom: 7,
                center: new google.maps.LatLng(this.coordinates[0][1], this.coordinates[0][0]),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                zoomControl: true,
                scaleControl: true,
                zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_TOP
                }
            });

Here is my map:

I am using google map for my site but I can not see the full screen feauture on the map. How can I activate and why I can't see it?

I have add following option to map:

var map = new google.maps.Map(document.getElementById('googleMap'), {
                zoom: 7,
                center: new google.maps.LatLng(this.coordinates[0][1], this.coordinates[0][0]),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                zoomControl: true,
                scaleControl: true,
                zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_TOP
                }
            });

Here is my map:

• javascript
• angular
• google-maps

Share Improve this question Follow asked Oct 14, 2017 at 18:35 mogli moglimogli mogli 26111 gold badge55 silver badges1515 bronze badges 3

• the width of the map is related with the div that contain the map ... show the related html and css code... – ScaisEdge Commented Oct 14, 2017 at 18:44
• did you try this in your html code <div id="googleMap" style="height:100%;width:100%" ></div> – faljbour Commented Oct 14, 2017 at 18:55
• #googleMap{ height: calc(100vh - 11em); } – mogli mogli Commented Oct 14, 2017 at 20:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

By default, the fullscreen control is not included on the desktop version of the Google Maps API. Add the fullscreenControl: true property to the object used to initialize the map. Your code should look like this:

var map = new google.maps.Map(document.getElementById('googleMap'), {
 zoom: 7,
 center: new google.maps.LatLng(this.coordinates[0][1], this.coordinates[0][0]),
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 zoomControl: true,
 scaleControl: true,
 fullscreenControl: true
 zoomControlOptions: {
  position: google.maps.ControlPosition.LEFT_TOP
 }
});

Checkout the documentation at https://developers.google./maps/documentation/javascript/controls

In the google maps documentation;

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

This ment is a bit late, but maybe it helps someone.

The article link is; Google Maps Platform

The section is; Controls Overview