Google Maps w/multiple markers Pt. 2

<!DOCTYPE html>
<html>
<head>
  <title>Google Maps Multiple Markers</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" type="text/javascript"></script>
  <script src="http://maps.google.com/maps/api/js?key=<INSERT YOUR OWN DAMN KEY>" type="text/javascript"></script>
  <script type="text/javascript">
    var map;
    var centerLatLng = new google.maps.LatLng(-33.92, 151.25);

    // Create the map, define zoom level, set center point and declare map type
    function initialize() {
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: centerLatLng,
        mapTypeId: google.maps.MapTypeId.HYBRID
      });

      // When the map container is re-sized, reset the center point of the map
      google.maps.event.addDomListenerOnce(map, 'idle', function () {
        google.maps.event.addDomListener(window, 'resize', function () {
            map.setCenter(centerLatLng);
        });
      });
    }

    // Accepts the array of markers and places those markers, with titles on the map.
    function loadMarkers(locations) {
      for (var i = 0; i < locations.length; i++) {
        new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map,
          title: locations[i][0]
        });
      }
    }

    // Once the page is finshed loading ...
    $(document).ready(function() {
      // Initialize the map,
      initialize();

      // Load the markers to the map. Since the markers are loaded after the page is
      // loaded, the marker data can be loaded in the view.
      loadMarkers([
          ['Bondi Beach', -33.890542, 151.274856],
          ['Coogee Beach', -33.923036, 151.259052],
          ['Cronulla Beach', -34.028249, 151.157507],
          ['Manly Beach', -33.800101, 151.287478],
          ['Maroubra Beach', -33.950198, 151.259302]
        ]);
    });
  </script>
  <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        margin: 5px;
        border: 1px solid #333;
        height: 300px;
      }
  </style>
</head>
<body>
  <div id="map" name="map"></div>
</body>
</html>