Google map don't display / endlessly loading js script - google-maps-api-3

Question

I have a strange issue. I want to display a google map on the site I'm working on. I use a map.php including html code and my initMap and createMap fonction to create my map with Map class and a constructor in a file named class.map.js .
The web page seems to be loading endlessly like the class.map.js, there is no error in the console, the repet in the console is a console.log("repet") placed in the constructor showing that the class.map.js is doing a sort of looping. any clue ?
// Class to store the maps functions
// #class Map
class Map {
constructor(googleApiKey, locale, lat, lng, latLngRef, filter, geo) {
///////////////////////// <- VARIABLES -> ////////////////////////////////
/////////////////////////////////////////////////////////////////////////
/*The global parameters */
this.googleApiKey = googleApiKey; // The Api key
// locale ? this.locale = locale.split('_')[0] : this.locale = 'fr';
this.locale = 'fr';
// locale.split('_')[0]; // The country
this.filter = filter; // the filter above the IM
this.defaultZoomLevel = 13;
this.boolZoomDisplay = true;
// Used by refreshData to determine if a displayData() is needed
this.isGeo = geo; // == true if the geolocation is available; else == false
// If geo == true : lat / lng = My current position
// else : lat / lng = the ref ground position (or NaN if there isn't any)
this.lat = lat;
this.lng = lng;
this.latLng = {lat: lat, lng: lng};
this.latLngRef = latLngRef; // User ref ground geoloc, can value NaN
this.countryLatLng = {lat: 48.6, lng: 2.3};
console.log("repet")
// The coordinate of the country
// if the navigator object is available we set the countryLatLng value to the value obtained by a text file
// if(navigator.language != null){
// let pays = navigator.language.split('-')[1];
// // Do a $.ajax, and not a $.JSON, to make the call not asynchronous
// let _latLng;
// $.ajax({
// url: "countryCoordinates.json",
// dataType: 'json',
// async: false,
// success: function(data) {
// let obj = data[pays] || data['FR'];
// let lat = obj['lat'];
// let lng = obj['lng'];
// // let lat = 48.6;
// // let lng = 2.3;
// _latLng = {lat: lat, lng: lng};
// }
// });
// this.countryLatLng = _latLng;
// }
this.markersArray = []; // Contains all the markers already created
this.newMarkers = []; // Contains all the markers undisplayed
this.mouseDownPos = null; // used for the workaround to disable the click event onscroll
// The currently opened infoWindow
this.selectedInfoWindow = new google.maps.InfoWindow({});
// Temporary marker (to creat a new ground)
this.tempMarker;
// == True if the click is on a cluster; else == false
this.clusterClicked = false;
// Configuration du style de la carte : https://snazzymaps.com
this.styles = [
{ "featureType": "all", "elementType": "labels.text.fill", "stylers": [{ "saturation": 36 }, { "color": "#333333" }, { "lightness": 40 }] },
{ "featureType": "all", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "on" }, { "color": "#ffffff" }, { "lightness": 16 }] },
{ "featureType": "all", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] },
{ "featureType": "administrative", "elementType": "geometry.fill", "stylers": [{ "color": "#fefefe" }, { "lightness": 20 }] },
{ "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [{ "color": "#fefefe" }, { "lightness": 17 }, { "weight": 1.2 }] },
{ "featureType": "landscape", "elementType": "geometry", "stylers": [{ "color": "#f5f5f5" }, { "lightness": 20 }] },
{ "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#f5f5f5" }, { "lightness": 21 }] },
{ "featureType": "poi.park", "elementType": "geometry", "stylers": [{ "color": "#dedede" }, { "lightness": 21 }] },
{ "featureType": "road", "elementType": "geometry.fill", "stylers": [{ "color": "#858585" }] },
{ "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{ "lightness": 17 }] },
{ "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "color": "#ffffff" }, { "lightness": 29 }, { "weight": 0.2 }] },
{ "featureType": "road.arterial", "elementType": "geometry", "stylers": [{ "color": "#ffffff" }, { "lightness": 18 }] },
{ "featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [{ "color": "#c7c7c7" }] },
{ "featureType": "road.local", "elementType": "geometry", "stylers": [{ "color": "#ffffff" }, { "lightness": 16 }] },
{ "featureType": "road.local", "elementType": "geometry.fill", "stylers": [{ "color": "#c7c7c7" }] },
{ "featureType": "transit", "elementType": "geometry", "stylers": [{ "color": "#f2f2f2" }, { "lightness": 19 }] },
{ "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#e9e9e9" }, { "lightness": 17 }] },
{ "featureType": "water", "elementType": "geometry.fill", "stylers": [{ "color": "#c7c7c7" }] }
];
// generate clusterStyles
// probably better to move clusterStyles and mcOptions
let clusterStyles = [
{
textColor: 'white',
url: 'assets/img/ui/m1.png',
width: 55,
height: 54,
},
{
textColor: 'white',
url: 'assets/img/ui/m2.png',
width: 58,
height: 57,
},
{
textColor: 'white',
url: 'assets/img/ui/m3.png',
width: 68,
height: 67,
},
{
textColor: 'white',
url: 'assets/img/ui/m4.png',
width: 80,
height: 79,
},
{
textColor: 'white',
url: 'assets/img/ui/m5.png',
width: 92,
height: 91,
},
];
this.mcOptions = {
gridSize: 50,
styles: clusterStyles,
maxZoom: 12
};
// document.addEventListener('DOMContentLoaded', function() {
this.map = new google.maps.Map(document.getElementById('map'), {
styles: this.styles,
// Default zoom value
zoom: 11,
minZoom: 1,
streetViewControl: false, // Disables the street view ("Petit bonhomme jaune")
gestureHandling: "greedy",
zoomControl: true, // The 2 ('+' & '-') buttons that control the zoom
fullscreenControl: false, // The button that controles the fullscreen
});
// Creates the marker clusterer
this.markerClusterer = new MarkerClusterer(this.map);
// })

Answer 1

So i found the error, my class Map was named like the constructor provided by google to display the map.