jquery - JavaScript Variable undefined outside of function - Stack Overflow

I have a script section in my html file where I create a new instance of my gmap object. Outside of the function initMap() the variable gMap is undefined although I declared it outside of the function.

var gMap;
function initMap() {
    gMap = new gmap({
        //some Properties
    });
    console.log(gMap); //gMap is defined
}
console.log(gMap); //gMap is undefined

The function is called like this:

<script async defer
  src=";callback=initMap">
</script>

I also tried calling it through $(document).ready instead of google API callback but it changed nothing.

I have a script section in my html file where I create a new instance of my gmap object. Outside of the function initMap() the variable gMap is undefined although I declared it outside of the function.

var gMap;
function initMap() {
    gMap = new gmap({
        //some Properties
    });
    console.log(gMap); //gMap is defined
}
console.log(gMap); //gMap is undefined

The function is called like this:

<script async defer
  src="https://maps.googleapis./maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

I also tried calling it through $(document).ready instead of google API callback but it changed nothing.

• javascript
• jquery

Share Improve this question Follow asked Dec 15, 2016 at 14:46 maidimaidi 3,50966 gold badges3232 silver badges5959 bronze badges 2

• 1 you haven't set gmap to anything when you log it outside of the function. the only time it will be set is when you call initMap. Any javascript outside of a function is executed when the page loads. – jordaniac89 Commented Dec 15, 2016 at 14:49
• can you post a link to plunkr or somewhere with a MINIMALIST example of the issue. – gh9 Commented Dec 15, 2016 at 18:34

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I think you will find that's it's because you have not called the function. You need to call the function before logging it to have the value assigned.

EG:

var gMap;
function initMap() {
    gMap = new gmap({
        //some Properties
    });
    console.log(gMap); //gMap is defined
}
console.log(gMap); //gMap is undefined
initMap();
console.log(gMap); //gMap is defined

Hope that helps!

You get undefined because gMap exist but it doesn't assign with any value when you call it with console.log for the first time, outside of the function. Up until you call initMap() - only then gMap will get assigned with a value (or properties in your case). If you Don't want to get undefined before you call your function, you'll need to assign it some value on the 'outside function' scope,

Such as this simple example:

var gMap = 'im not undefined';
function initMap() {
    gMap = 'im still not undefined';
    console.log(gMap); //gMap is defined
}
console.log(gMap);
initMap();
console.log(gMap);

Will produce the following output:

"im not undefined" //outside call
"im still not undefined" //inside function call
"im still not undefined" //second outside call 

You are correct, the google call back is running after your console.log().

So what is happening is

1. You declare gMap var.
2. Then you create your InitMap function
3. Then you output gmap
4. Then google is calling your callback function. Thus when you output gmap outside of your function it is undefined

if you do this

$(document).ready(function(){
var gMap;
function initMap() {
    gMap = new gmap({
        //some Properties
    });
    console.log(gMap); //gMap is defined
}
console.log(gMap); //gMap is undefined
}

You will still get an undefined, because nothing is calling initMap before you are logging gmap. You need to gMap to something before you try and log it

The below code will load gMap properly, without knowing what you are using it for its hard for me to give you working code to do what you need.

$(document).ready(function(){
   var gMap = new gmap({});
   console.log(gMap); //gMap is defined

}