javascript - Google Maps Implementation Issue & API Prefix Error -

!! updated !!

i'm having little trouble getting google map display correctly, , i'm getting error in console log. have tried adjusting prefix listed examples here. feel i'm still not understanding correctly. explain in laymans terms me?

1 - prefixed fullscreen api deprecated. please use unprefixed api fullscreen. more https://developer.mozilla.org/en-us/docs/web/api/fullscreen_api

this believe errornous code is;

    // google map element     var mapelement = document.getelementbyid('map');      // added thes lines try , solve prefix error.     if (mapelement.requestfullscreen) {         mapelement.requestfullscreen();     } 

edit :

okay little trouble has turned couple of days of trial , error. have tried number of different things try , around issue, don't think im saavy enough undertand what's going wrong.

just update error log;

1 - typeerror: google undefined p-apollo:32:5

2 - prefixed fullscreen api deprecated. please use unprefixed api fullscreen. more 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 : have generated , included api key google, i'm running locally; have commented out , added following in it's place. tried adding release verion of api mentioned in answer.

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

full code chunk

just cover bases have added code chunk have in place google map. if 1 please scan through , make sure haven't made noob error, appreciate it, second set of eyes 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,             // latitude , longitude center 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

i'm going try answer every points in order they're mentioned in question , conclude working example.

the first warning you're encountering prefixed fullscreen api deprecated.

browser vendors add prefixes experimental or nonstandard api developers can experiment them changes in browser behavior don't break code during standard process. example, imagine function getexperimentalfeature. in browser, you'll able call natively getexperimentalfeature(); browsers can decide prefix you'll have use webkitgetexperimentalfeature(); in chrome use webkit engine, in microsoft ie need use msgetexperimentalfeature();, etc.

in code, need use correct function call depending on browser. that's happening fullscreen api , described in this table. in browser, you'll need use requestfullscreen() in webkit browser, you'll need use webkitrequestfullscreen().

so if take code , put in function goal enter in fullscreen mode, we'll use 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 checking if can use not prefixed method, if not, continue testing every prefix available until find 1 can use.

unfortunately, warning not going disappear in browser firefox example. google api in control.js file using fullscreen api without testing unprefixed version. fortunately, warning , not javascript error can ignore until google fix issue.

to add more informations regarding fullscreen api, in code seems trying automatically trigger fullscreen mode. it's not possible, can't force website display in fullscreen mode using fullscreen api security reasons. way use fullscreen api enable when user decides using user interaction, example, click on button.

if try force fullscreen mode, you'll following error expected:

failed execute 'requestfullscreen' on 'element': api can initiated user gesture.

you can find more informations regarding matter in this question.

your next error typeerror: google undefined p-apollo:32:5. it's coming first line of code:

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

you're trying "when map loaded, execute init function". code executed possible browser @ time, remote google api you're loading <script> tag not loaded. object google @ time not defined. can't use google api until it's loaded. avoid error, url you're using load api accepts callback parameter can use say: "when api loaded, execute function". example, in following url, i'm defining init function callback executed when api 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 google maps api error: missingkeymaperror , related said:

i have generated , included api key google, i'm running locally; have commented out , added following in it's place.

even if you're running locally, need specify api key. stated in the documentation regarding authentication, google maps javascript api applications require authentication.

if don't have api key, need go google api console, create or select project , enable api , related services. when have api key, can include in url you're using load api 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 fine, @ point, thing remove code relative fullscreen mode, wrap in function , call after user interaction, button example.

i've put following complete working example, thing need change work change your_api_key actual correct api key. after that, you'll map , button trigger 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>