how can i solve ESLint error that 'no-unused-var' with google map

Question

I think that it's simple problem but i can't solve it
I had entered /* export myMap */ or /* global myMap */ at the top of the script but errors is continuing

Code

HTML

<h1>My First Google Map</h1>
<div id="googleMap" style="width:60%;height:600px;margin: auto;"></div>
<script src="https://maps.googleapis.com/maps/api/js? key=YOUR_KEY&callback=myMap"></script>

JavaScript

function myMap() {
    var mapProp= {
        center:new google.maps.LatLng(37.540881, 127.079689),
        zoom:17,
    };
    var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

When I wrote the code as showed above, I saw the following error

Error ESLint 'myMap' is defined but never used. (no-unused-vars)
Error ESLint 'google' is not defined. (no-undef)
Error ESLint 'map' is assigned a value but never used. (no-unused-vars)
Error ESLint 'google' is not defined. (no-undef)

but google API use 'google', 'map' and I use 'myMap' . it's no doubt
please help beginner. thx

p.s. I don't want solve with /* eslint-disable no-unused-vars */

Answer 1

To get rid of the error messages you have to tell your linter that google is an external variable, and you need to tell the linter that you plan to use myMap externally. And as you don't use map later you can just remove the var map =.

The linter is really dumb and can only verify the consistency within the file that it currently lints, it cannot verify that use a function in another file/script and it cannot verify that a variable originates from somewhere else.

The simplest approach would be to use the global option to tell the linter that google was defined somewhere else, and write window.myMap = myMap, that way you explicitly assign myMap to the global object window (which for the given code does not really change anything as myMap is already defined globally) and tells the linter that it is expected that is is used somewhere else outside of that script.

The linter cannot verify that myMap that it is really used somewhere else and has to trust you there.

/* global google */

function myMap() {
  var mapProp = {
    center: new google.maps.LatLng(37.540881, 127.079689),
    zoom: 17,
  };
  new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

window.myMap = myMap;

But if you don't use a module bundler like webpack or rollup and nothing like commonjs, amd or native es6 modules, then you should always wrap your code into an IIFE to ensure that you pollute the global scope as less as possible:

(function() {
  /* global google */

  function myMap() {
    var mapProp = {
      center: new google.maps.LatLng(37.540881, 127.079689),
      zoom: 17,
    };
    new google.maps.Map(document.getElementById("googleMap"), mapProp);
  }

  window.myMap = myMap;
}())

And here the window.myMap = myMap has indeed the purpose to make the function available for other scripts.

Instead of writing /* global google */ you could do the inverse of the window.myMap = myMap, but this will only work if the scripts are loaded in the correct order so that the google maps scripts sets goolge before your script executed:

(function() {
  var google = window.google;

  function myMap() {
    var mapProp = {
      center: new google.maps.LatLng(37.540881, 127.079689),
      zoom: 17,
    };
    new google.maps.Map(document.getElementById("googleMap"), mapProp);
  }

  window.myMap = myMap;
}())

Now you have a syntax that is really close to how AMD modules (like used in nodejs or webpack) look like, and would make it easier if you plan to switch to a bundler in future:

var google = require('google');

function myMap() {
  var mapProp = {
    center: new google.maps.LatLng(37.540881, 127.079689),
    zoom: 17,
  };
  new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

exports.myMap = myMap;