Cacher is the code snippet organizer for pro developers

// Asynchronously Load the map API
jQuery(function($) {
  var key = 'KEY';
  var script = document.createElement("script");
  script.src =
    "//maps.googleapis.com/maps/api/js?key=" + key + "&callback=initialize";
  document.body.appendChild(script);
});

function initialize() {
  var map;
  var bounds = new google.maps.LatLngBounds();
  var mapOptions = {
    mapTypeId: "roadmap",
    gestureHandling: 'auto',
    fullscreenControl: false,
    zoomControl: true,
    disableDoubleClickZoom: true,
    mapTypeControl: false,
    scaleControl: false,
    scrollwheel: true,
    streetViewControl: false,
    draggable : true,
    clickableIcons: false,
  };

  // Display a map on the page
  map = new google.maps.Map(document.getElementById("nuvo-map-msoms-all"), mapOptions);
  map.setTilt(45);
  var practiceName = "NAME";
  var practiceNameBr = "NAME-WITH-BR";

  // array of markers to create
  var markers = [
    ["LOCATION-NAME", LATITUDE, LONGITUDE, "LOCATION-LINK", "PLACE-ID"],
  ];

  // inforwindow marker variable
  var infoWindow = new google.maps.InfoWindow(),
    marker,
    i;

  // Loop through markers array and create marker + place on map at lat,lng
  for (i = 0; i < markers.length; i++) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
      position: position,
      map: map,
      animation: google.maps.Animation.DROP,
      title: markers[i][0],
    });

    // Loops through markers array and creates infoWindow for each
    google.maps.event.addListener(
      marker,
      "click",
      (function(marker, i) {
        return function() {
          infoWindow.setContent(
            '<div class="map-info-window">' +
            '<div class="map-header">' +
            "<h3>" + practiceNameBr + "</h3>" +
            "<h4>" + markers[i][0] + "</h4>" +
            '</div>' +
            '<div class="map-body">' +
            '<a href="' + markers[i][3] + '"><button class="btn-md">Contact Us</button></a>' +
            '<a href="https://www.google.com/maps/dir/?api=1&origin=&destination=QVB&destination_place_id=' + markers[i][4] + '&travelmode=driving&dir_action=navigate" target="_blank"><button class="btn-md">Get Directions</button></a>' +
            "</div>" +
            "</div>"
          );
          infoWindow.open(map, marker);
        };
      })(marker, i)
    );

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
  }

  // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
  var boundsListener = google.maps.event.addListener(
    map,
    "bounds_changed",
    function(event) {
      // manually set zoom level
      this.setZoom(8);
      google.maps.event.removeListener(boundsListener);
    }
  );
}