Google Maps API has been updated and function is different

[DaveyJH]

map and markers are now passed inside an object not independent arguments, no image is necessary.
The source code works but is outdated and using an old version. This seems to be causing confusion for some students.

Current Link in videos

New API Link
Really reader-friendly code...🤔

Google Maps API Docs

<!-- revised script not indented -->

<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
    <script src="assets/js/maps.js"></script>

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 3,
      center: {
          lat: 46.619261,
          lng: -33.134766
      }
  });
  
  const locations = [
    { lat: 40.785091, lng: -73.968285 },
    { lat: 41.084045, lng: -73.874245 },
    { lat: 40.754932, lng: -73.948016 },
  ];

  const markers = locations.map(function (location, i) {
    const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length],
    });
  });
  const markerCluster = new markerClusterer.MarkerClusterer({map, markers});
}

Cheers,

Dave