有没有办法在谷歌地图回调中包含一个对象原型方法？

Question

I'm building a map with the Google maps dev, the problem is that I need to build the javascript in object way, and when I call the Google API in the script tag it's a simple function in the callback.

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

Like above the function here is initMap by default. I want to set the function called to be mapInit like in the code I included.

The problem is that the map doesn't show up, the width and height are good in the CSS but it won't initialize if the 'function initMap(){}' is in the prototype of my Map object.

And of course when the function is outside it works nice. So, I'm quite lost and if there are any solutions to resolve my problem I would gladly take them ! Thanks

'use strict';

var Map = function () {
    this.mapInit();
};

Map.prototype.mapInit = function () {

};
 function initMap() {
        var map;
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 47.2173, lng: -1.5534},
            zoom: 10
}

Thanks in advance.

Answer 1

Your callback function needs to be globally accessible so that the Maps API can see it. You can initialize a Map in that function though:

var Map = function () {
  this.mapInit();
};

Map.prototype.mapInit = function () {
  // do the stuff you want to do
};

function initMap() {
  new Map();
};