How to call google maps API with object-oriented javascript?

Question

Building a web app with 2 APIs (Google Maps & JCdecaux). I use Google to get a map where I can put markers. Positions of markers are got from the second API (JSDecaux). My code is running well but i would like to make it more object-oriented using class, constructors and parameters. I would like to have my html target where there is the map in parameter.

html

<div id="map"></map>

working js

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'),
       {
        center: {lat: 45.764043, lng: 4.835659},
        zoom: 14
    });     
}

window.onload = function(){
    initMap(); 
}; 

function request (url) {
    return new Promise(function (resolve, reject) {
        const req = new window.XMLHttpRequest();
        req.onreadystatechange = function() {
            if (req.readyState === 4) {
                if (req.status === 200) {
                   resolve(req.responseText);
                }
                else {
                   reject(req);
                }
            }
        }

    req.open("GET", url);
    req.send();       
    });    
}

const getInfos = function() {
    return new Promise(function(resolve, reject) {
        request("https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=myKey").then (function (response) {  
            const data = JSON.parse(response);
            resolve(data);
        }).catch(function(error){
            console.log(error);
        })
    })
};

const stationsTab = [];

getInfos().then(function(data) {
    data.forEach(function(info) {
            const station =
                {
                    stationName : info.name,
                    stationLocation : info.position,
                 };

            stationsTab.push(station);

            mark = new google.maps.Marker
            ({
                map : map,
                position : station.stationLocation,
                name : station.stationName,
                icon : 'images/bluemarker.png'
            });

            google.maps.event.addListener(mark, "click", function() {

              alert('something')
            });

        })

})

what i'm trying to do

class Createmap {
    constructor(target) {
         this.target = document.getElementById(target);
         this.allFunctions()
    }

    allFunctions() {
    }

}

to run it like

let newCreatemap = new Createmap("map")

Answer 1

Not tested, but it should look like:

let mapObj;
var map;


window.onload = function(){
    mapObj = new Createmap(map);
}; 

class Createmap {
    constructor(target) {
         this.target = document.getElementById(target);
         this.map = new google.maps.Map(document.getElementById('map'),
         {
          center: {lat: 45.764043, lng: 4.835659},
          zoom: 14
      });
         this.stationsTab = [];    
         this.loadData();
    }

    loadData = () => getInfos().then(function(data) {
        data.forEach((info) => {
                const station =
                    {
                        stationName : info.name,
                        stationLocation : info.position,
                     };

                this.stationsTab.push(station);

                mark = new google.maps.Marker
                ({
                    map : this.map,
                    position : station.stationLocation,
                    name : station.stationName,
                    icon : 'images/bluemarker.png'
                });

                google.maps.event.addListener(mark, "click", function() {

                  alert('something')
                });

            })

    })

     request = (url) =>
        new Promise(function (resolve, reject) {
            const req = new window.XMLHttpRequest();
            req.onreadystatechange = function() {
                if (req.readyState === 4) {
                    if (req.status === 200) {
                       resolve(req.responseText);
                    }
                    else {
                       reject(req);
                    }
                }
            }

        req.open("GET", url);
        req.send();       
        });

        getInfos = () =>
            new Promise(function(resolve, reject) {
                request("https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=myKey").then (function (response) {  
                    const data = JSON.parse(response);
                    resolve(data);
                }).catch(function(error){
                    console.log(error);
                })
            });

}