Google Maps and loading scripts async - how to order the loading?

Question

If I understand this correctly, using defer will load the scripts in the order I put them.

This will allow me to load jQuery before my own function (because it's lighter and laods more quickly). I load Google Maps at the bottom because it has a callback to a function inside tv-modal.js.

<script src="js/jquery.min.js" defer></script>
<script src="js/tv-modal.js" defer></script>
<script src="https://maps.googleapis.com/maps/api/js?key=abc&callback=modalMap.initMap" defer></script>

My Js looks like this:

var modalMap = {
    map: null,

    init: function() {
        var self = this;
        this.map = $('#modal-g-map');
    },

    initMap: function(){
        map = new google.maps.Map(document.getElementById('modal-g-map'), {
            center: {lat: 59.9071401, lng: 10.7711175},
            zoom: 11
        });
    }

}.init();

But Google Map isn't happy:

Uncaught InvalidValueError: modalMap.initMap is not a function

Why can't Google Maps callback call my function modalMap.initMap?

maybe chaining an object + function is not good practice? have you tried just giving a function name like: &callback=myfunction which itself just calls modalMap.initMap();? — Alex
– Alex, Commented Apr 1, 2016 at 11:10

Dr.Molle · Accepted Answer · 2016-04-01 13:00:17Z

1

modalMap is not this:

{
    map: null,

    init: function() {
        var self = this;
        this.map = $('#modal-g-map');
    },

    initMap: function(){
        map = new google.maps.Map(document.getElementById('modal-g-map'), {
            center: {lat: 59.9071401, lng: 10.7711175},
            zoom: 11
        });
    }

}

....you set it to the return-value of the init-method of the object above. The init-method returns nothing, so modalMap is undefined.

You must return the object in the init-method:

init: function() {
    var self = this;
    this.map = $('#modal-g-map');
    return this;//<--return the object
}

answered Apr 1, 2016 at 13:00

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Steven Over a year ago

Thanks, that helped. I'm reding your answer ove and over trying to understand this. But I don't. Because if I remove .init() and use modalMap.init() instead, I get the sameresult as using return this; Why is modalMap.init() working and not .init()? I have to understandthe answer The init-method returns nothing, so modalMap is undefined.

Dr.Molle Over a year ago

when you assign a variable the statement on the right will be evaluated completely(in your case it creates an object and calls a method of the object) and assigned as variable-value. So the value of the variable will be the return-value of the object-method, not the object itself.

Alex · Accepted Answer · 2016-04-01 11:16:37Z

0

I guess the way the API fires the function it does not recognize that initMap is a function of the object modalMap by just typing "modalMap.initMap" and hence is not a valid function name. Try to create a function outside of that object like so:

function apiCallback() {
  modalMap.initMap();
}

and adjust your callback parameter:

&callback=apiCallback

answered Apr 1, 2016 at 11:16

Alex

10.3k6 gold badges36 silver badges62 bronze badges

Collectives™ on Stack Overflow

Google Maps and loading scripts async - how to order the loading?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related