Google Maps Implementation Issue & API Prefix Error

Question

!! Updated !!

I'm having a little trouble getting my google map to display correctly, and I'm getting this error in the console log. I have tried adjusting the prefix as listed by the examples here. I feel however I'm still not understanding this correctly. Could anyone explain this in laymans terms for me?

1 - Prefixed Fullscreen API is deprecated. Please use unprefixed API for fullscreen. For more help https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

This is where I believe the errornous code is;

    // Google Map Element
    var mapElement = document.getElementById('map');

    // I added thes lines to try and solve the prefix error.
    if (mapElement.requestFullscreen) {
        mapElement.requestFullscreen();
    }

EDIT :

Okay so a little trouble has turned into a couple of days of trial and error. I have tried a number of different things to try and get around this issue, but I don't think im saavy enough to undertand what's going wrong.

Just to update my error log;

1 - TypeError: google is undefined p-apollo:32:5

2 - Prefixed Fullscreen API is deprecated. Please use unprefixed API for fullscreen. For more help https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API controls.js:23:54

3 - "Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error" js:32:350

4 - "Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys" util.js:222:12

5 - "Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required" util.js:222:12

Note : I have generated and included an API key from google, however as I'm running locally; I have commented this out and added the following in it's place. I tried adding a release verion of the API as mentioned in another answer.

    <!-- Google Maps API -->
    <script language="javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&v=3"></script>

Full Code Chunk

Just to cover all the bases I have added the code chunk i have in place for my google map. If some one could please scan through it and make sure I haven't made a noob error, I would appreciate it, sometimes a second set of eyes is the solution.

    <!-- Google Maps Script -->
    <script type="text/javascript">

    // create google map on doc load
    google.maps.event.addDomListener(window, 'load', init);

    function init() {

        var mapOptions = {
            zoom: 11,
            // The latitude and longitude to center the map (always required)
            center: new google.maps.LatLng(40.6700, -73.9400), 

            styles: [{
                "featureType": "landscape",
                "stylers": [{
                    "hue": "#FFBB00"
                }, {
                    "saturation": 43.400000000000006
                }, {
                    "lightness": 37.599999999999994
                }, {
                    "gamma": 1
                }]
            }, {
                "featureType": "road.highway",
                "stylers": [{
                    "hue": "#FFC200"
                }, {
                    "saturation": -61.8
                }, {
                    "lightness": 45.599999999999994
                }, {
                    "gamma": 1
                }]
            }, {
                "featureType": "road.arterial",
                "stylers": [{
                    "hue": "#FF0300"
                }, {
                    "saturation": -100
                }, {
                    "lightness": 51.19999999999999
                }, {
                    "gamma": 1
                }]
            }, {
                "featureType": "road.local",
                "stylers": [{
                    "hue": "#FF0300"
                }, {
                    "saturation": -100
                }, {
                    "lightness": 52
                }, {
                    "gamma": 1
                }]
            }, {
                "featureType": "water",
                "stylers": [{
                    "hue": "#0078FF"
                }, {
                    "saturation": -13.200000000000003
                }, {
                    "lightness": 2.4000000000000057
                }, {
                    "gamma": 1
                }]
            }, {
                "featureType": "poi",
                "stylers": [{
                    "hue": "#00FF6A"
                }, {
                    "saturation": -1.0989010989011234
                }, {
                    "lightness": 11.200000000000017
                }, {
                    "gamma": 1
                }]
            }]
        };

        // Google Map Element
        var mapElement = document.getElementById('map');
            if (mapElement.requestFullscreen) {
                mapElement.requestFullscreen();
            }

        var map = new google.maps.Map(mapElement, mapOptions);

        // Map Marker
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(40.6700, -73.9400),
            map: map,
            title: 'title'
        });
    }
    </script>

Tested In : - Firefox 47.0 - Chrome 51.0.2704.103

Answer 1

I'm going to try to answer every points in the order they're mentioned in the question and conclude with a working example.

The first warning you're encountering is Prefixed Fullscreen API is deprecated.

Browser vendors sometimes add prefixes to experimental or nonstandard API so developers can experiment with them but changes in browser behavior don't break the code during standard process. For example, imagine a function getExperimentalFeature. In some browser, you'll be able to call it natively with getExperimentalFeature(); but some browsers can decide to prefix it so you'll have to use webkitGetExperimentalFeature(); in Chrome which use the Webkit engine, in Microsoft IE you will need to use msGetExperimentalFeature();, etc.

In your code, you need to use the correct function call depending on the browser. That's what happening with the Fullscreen API and described in this table. In some browser, you'll need to use requestFullscreen() but in a Webkit Browser, you'll need to use webkitRequestFullscreen().

So if we take your code and put it in a function with the only goal to enter in fullscreen mode, we'll use something like:

function enterFullscreen() {
  var element = document.documentElement;

  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  }
}

We're starting by checking if we can use the not prefixed method, if not, we continue by testing every prefix available until we find one that we can use.

Unfortunately, the warning is not going to disappear in some browser like Firefox for example. The Google API itself in his control.js file is using the Fullscreen API without testing for the unprefixed version. Fortunately, it is only a warning and not a javascript error so you can ignore it until Google fix the issue.

To add more informations regarding the Fullscreen API, in your code it seems you were trying to automatically trigger the fullscreen mode. It's not possible, you can't force a website to display in fullscreen mode using the Fullscreen API for security reasons. The only way to use the Fullscreen API is to enable it only when the user decides it using a user interaction, for example, a click on a button.

If you try to force the fullscreen mode, you'll get the following error which is expected:

Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.

You can find more informations regarding this matter in this question.

Your next error is TypeError: google is undefined p-apollo:32:5. It's coming from your first line of code:

google.maps.event.addDomListener(window, 'load', init);

You're trying to say "when the map is loaded, execute my init function". This code is executed as soon as possible by the browser but at this time, your remote Google API you're loading with the <script> tag is not even loaded. So the object google at this time is not defined. You can't use the Google API until it's fully loaded. To avoid this error, the url you're using to load the API accepts a callback parameter that you can use to say: "When the API is loaded, execute this function". For example, in the following URL, I'm defining your init function as the callback to be executed when the API is loaded:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=init" type="text/javascript"></script>

The next error is Google Maps API error: MissingKeyMapError and is related to what you said:

I have generated and included an API key from google, however as I'm running locally; I have commented this out and added the following in it's place.

Even if you're running locally, you need to specify your API key. As stated in the documentation regarding authentication, all Google Maps JavaScript API applications require authentication.

If you don't have an API key, you need to go to the Google API Console, create or select a project and enable the API and any related services. When you have your API key, you can include it in the URL you're using to load the API with the key parameter like:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=init" type="text/javascript"></script>

Your mapOptions seems to be fine, at this point, the only thing to remove is your code relative to the fullscreen mode, wrap it in a function and call it only after a user interaction, like a button for example.

I've put up the following complete working example, the only thing you need to change to get it to work is change the YOUR_API_KEY to your actual correct API Key. After that, you'll get a map and a button to trigger the fullscreen mode.

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      button {
        margin: 10px;
      }

      #map {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>

    <button id="fullscreen" onClick='enterFullscreen();'>Go fullscreen</button>
    <div id="map"></div>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=init"
  type="text/javascript"></script>
    <script>
      function init() {
        var mapOptions = {
            zoom: 11,

            center: new google.maps.LatLng(40.6700, -73.9400),

            styles: [{
                "featureType": "landscape",
                "stylers": [{
                    "hue": "#FFBB00"
                }, {
                    "saturation": 43.400000000000006
                }, {
                    "lightness": 37.599999999999994
                }, {
                    "gamma": 1
                }]
            }, {
                "featureType": "road.highway",
                "stylers": [{
                    "hue": "#FFC200"
                }, {
                    "saturation": -61.8
                }, {
                    "lightness": 45.599999999999994
                }, {
                    "gamma": 1
                }]
            }, {
                "featureType": "road.arterial",
                "stylers": [{
                    "hue": "#FF0300"
                }, {
                    "saturation": -100
                }, {
                    "lightness": 51.19999999999999
                }, {
                    "gamma": 1
                }]
            }, {
                "featureType": "road.local",
                "stylers": [{
                    "hue": "#FF0300"
                }, {
                    "saturation": -100
                }, {
                    "lightness": 52
                }, {
                    "gamma": 1
                }]
            }, {
                "featureType": "water",
                "stylers": [{
                    "hue": "#0078FF"
                }, {
                    "saturation": -13.200000000000003
                }, {
                    "lightness": 2.4000000000000057
                }, {
                    "gamma": 1
                }]
            }, {
                "featureType": "poi",
                "stylers": [{
                    "hue": "#00FF6A"
                }, {
                    "saturation": -1.0989010989011234
                }, {
                    "lightness": 11.200000000000017
                }, {
                    "gamma": 1
                }]
            }]
        };

        var mapElement = document.getElementById('map');

        var map = new google.maps.Map(mapElement, mapOptions);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(40.6700, -73.9400),
            map: map,
            title: 'title'
        });
      }

      function enterFullscreen() {
        var element = document.documentElement;

        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        }
      }
    </script>
  </body>
</html>