A clean way to use Google Maps API v3 with multiple cursor & infoWindows

Clean Google Maps API v3 with multiple markers & infoWindows

// ⚠ Fork of https://gist.github.com/rbochet/888937/cbc176598725b4e5ad300bd24fee68bcefb87516 ⚠

// Use https://github.com/Concept211/Google-Maps-Markers#usage-premade : For icons !
/**
 * Marker JSON schema:
 * {
 *   location: 'LatLng Google map object', // This will overide latitude and longitude properties
 *   latitude: 'The latitude of the marker',
 *   longitude: 'The longitude of the marker',
 *   icon: 'The URL of the icon to use' // By default it the red classic one*
 *   title: 'The title of the marker',
 *   infowindow: 'The HTML markup of infoWindow to use for this marker',
 *   openInfoWindow: 'The switch to automaticly open the infowindow after place the marker'
 * }
 */


const markersData = { 'HERE JSON DATA' };

let infowindow = null;

/**
 * The Google Map initialization callback. Specify it in your URL link
 */
function initMap() {
  const mapCenter = new google.maps.LatLng( 'HERE LATITUDE OF THE CENTER OF THE MAP', 'HERE LOGITUDE OF THE CENTER OF THE MAP');

  const myOptions = {
    zoom: 12,
    center: mapCenter,
    disableDefaultUI: true,
    mapTypeControl: false,
    scaleControl: true,
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.TOP_LEFT
    },
  }

  let map = new google.maps.Map(document.getElementById("map"), myOptions);

  const geocoder = new google.maps.Geocoder();

  infowindow = new google.maps.InfoWindow({
      content: "Loading..."
  });

  geocoder.geocode({'address': "THE ADRESSE OF THE CENTER OF THE MAP"}, function (results, status) {
    if (status === 'OK') {
      const centerMarker = [{
        location: results[0].geometry.location,
        infowindow: "<p style=\"font-size:14px; font-weight: bold; margin-bottom: 0\">HERE INFO WINDOW OF THE CENTER MARKER</p>",
        title: 'TITLE',
        icon: 'https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_green.png',
        openInfoWindow: true,
      }]

      // TODO: Make these functions asynchronous to be able to use .then()
      setMarkers(map, centerMarker, true);
      setMarkers(map, markersData, true);
      setZoom(map, centerMarker.concat(markersData));
      document.getElementById("map").classList.remove('loading'); // I add 'loading' class on markup to add blur and a message to the loading time of the map. I remove it when loading is finished.
    } else {
      alert('Une erreur est survenue lors de l\'initilisation de la carte: ' + status);
    }
  });
}


/**
 * This functions sets markers to the map
 * 
 * @param map The map variable
 * @param markers An array of JSON markers. Respect the JSON schema
 */
function setMarkers(map, markers, enableMarkerCounter) {

    for (let i = 0; i < markers.length; i++) {
        let markerData = typeof markers[i] === 'string' ? JSON.parse(markers[i]) : markers[i];
        let markerLatLng = markerData.location ? markerData.location : new google.maps.LatLng(markerData.latitude, markerData.longitude);

        if (!markerData.hasOwnProperty('icon') && markers.length < 100) {
            markerData.icon = `https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_red${i+1}.png`;
        }

        let mapMarker = new google.maps.Marker({
            position: markerLatLng,
            map: map,
            title: markerData.title,
            html: markerData.infowindow,
            icon: markerData.icon ? markerData.icon : 'https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_red.png',
        });

        google.maps.event.addListener(mapMarker, "click", function () {
            infowindow.close();
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });

        if (
            markerData.hasOwnProperty('openInfoWindow') && typeof markerData.openInfoWindow === 'boolean' && markerData.openInfoWindow
            && markerData.hasOwnProperty('infowindow') && typeof markerData.infowindow === 'string' && markerData.infowindow.length
        ) {
            console.log('PASSED');
            infowindow = new google.maps.InfoWindow({
                content: markerData.infowindow
            });
            infowindow.open(map, mapMarker);
        }
    }
}


/**
 * Set the zoom to fit comfortably all the markers in the map
 * 
 * @param map The map variable
 * @param markers An array of JSON markers. Respect JSONschema !
 */
function setZoom(map, markers) {
    let boundbox = new google.maps.LatLngBounds();
    for ( let i = 0; i < markers.length; i++ )
    {
        let markerData = typeof markers[i] === 'string' ? JSON.parse(markers[i]) : markers[i];
        if (markerData.hasOwnProperty('location') && typeof markerData.location === 'object' && markerData.location) {
            boundbox.extend(markerData.location);
        } else {
            boundbox.extend(new google.maps.LatLng(markerData.latitude, markerData.longitude));
        }
    }
    map.setCenter(boundbox.getCenter());
    map.fitBounds(boundbox);
}