markers, info window, zoom to fit

by grant

HTML

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

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>

CSS

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
  //zoom: 6,
  //center: new google.maps.LatLng(52.999085, -2.833751),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
//https://lrio.com/kml/icons/water.png

var locations = [
 
  ['Bondi Beach', -33.890542, 151.274856, 'https://maps.google.com/mapfiles/ms/micons/yellow.png'],
  ['Coogee Beach', -33.923036, 151.259052, 'https://maps.google.com/mapfiles/ms/micons/blue.png'],
  ['Cronulla Beach', -34.028249, 151.157507, 'https://maps.google.com/mapfiles/ms/micons/blue.png'],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 'https://lrio.com/kml/icons/apple.png'],
  ['Maroubra Beach', -33.950198, 151.259302, 'https://maps.google.com/mapfiles/ms/micons/blue.png'],
  ['grant Beach', -33.950198, 150.259302, 'https://maps.google.com/mapfiles/ms/micons/red.png']
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    icon: locations[i][3],
    map: map
  });
  bounds.extend(marker.getPosition());
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      let name = locations[i][0];
      let lat = locations[i][1];
      let html = name + "<br />" + lat;
      console.log(html)
      infowindow.setContent(html);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
map.fitBounds(bounds);
}

window.initMap = initMap;