testing google map

by Lawrence Ross

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Vigor Locations</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    </head>

  <body>
    <div id="map"></div>
   <!--
   <script>
 	</script>
	-->
	<script type="text/javascript" src="map_custom_2.js"></script>
	<!-- NOTE TO SELF: REVOKE API KEY AFTER ASSIGNMENT -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQfkiMFrFWpGHmP7YMFtlfQM6YEDqslNU&callback=initMap"
        async defer></script>
  </body>
</html>

CSS

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
      #content {
      	text-align: center;
        display: block;
        position: absolute;
        bottom: -8px;
        left: -20px;
        background-color: white;
        z-index: 10001;
      }

      .gm-style .gm-style-iw-c {
        padding-top:1vw !important;
        padding-left:1vw !important;
        padding-right:1vw !important;
        padding-bottom:0.5vw !important;
        border-color:white;
        border-radius:0px !important;
      }

      .gm-ui-hover-effect {
        width:60px !important;
        height:30px !important;
      }

      .gm-ui-hover-effect img {
        padding-top: 0.5vw;
        width:30px !important;
        height: 30px !important;
      }

      #bodyContent img {
      	text-align: center;
      }

      #bodyContent p {
      	text-align: left;
      }

      .header {
        padding-right:2vw;
        font-weight: 600;
        font-size:26px;
        padding-bottom:15px;
        font-family:"IMB Plex Sans", sans-serif;
      }

      #address {
        font-size:16px;
        line-height:5px;
        font-family:"IMB Plex Sans", sans-serif;
      }

      #address-2 {
        font-size:16px;
        line-height:5px;
        font-family:"IMB Plex Sans", sans-serif;
        padding-bottom:29px;
      }
      #hours {
        font-size:12px;
        line-height:20px;
        font-family:"IMB Plex Sans", sans-serif;
      }

      .row {
        display: flex;
        padding: 0 0px;
      }

    /* Create four equal columns that sits next to each other */
      .column {
        flex: 25%;
        max-width: 25%;
        padding-top: 36px;
        padding-bottom: 0px;
        padding-left:0px;
        padding-right: 18px;
      }

      .column img {
        margin-top: 8px;
        vertical-align: middle;
        height: 85px;
      }

      #myImg {
        border-radius: 5px;
       ...

JavaScript

var locations = [
  ['<div class="header">Lower</div><img id="myImg" src="https://www.geocodezip.net/images/snow.png" alt="Snow" style="width:100%;max-width:300px"><div id="myModal" class="modal"><span class="close">&times;</span><img class="modal-content" id="img01"><div id="caption"></div>', 37.77, -122.43, 4],
];

function initMap() {
  var map= new google.maps.Map(
    document.getElementById('map'), {
      zoom: 14,
      center: { lat:37.78, lng:-122.44 }
    });

  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  var markers = new Array();

     for (i = 0; i < locations.length; i++) {
       marker = new google.maps.Marker({
         position: new google.maps.LatLng(locations[i][1], locations[i][2]),
         map: map,
       });

       google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0], locations[i][6]);
                google.maps.event.addListener(infowindow, 'domready', function() {
          // Get the modal
          var modal = document.getElementById("myModal");

          // Get the image and insert it inside the modal - use its "alt" text as a caption
          var img = document.getElementById("myImg");
          var modalImg = document.getElementById("img01");
          var captionText = document.getElementById("caption");
          img.onclick = function() {
            modal.style.display = "block";
            modalImg.src = this.src;
            captionText.innerHTML = this.alt;
          }

          // Get the <span> element that closes the modal
          var span = document.getElementsByClassName("close")[0];

          // When the user clicks on <span> (x), close the modal
          span.onclick = function() {
            modal.style.display = "none";
          }
        })

        infowindow.open(map, marker);
      };
    })(marker, i));
    markers.push(marker);
     }
}