index.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Google Maps</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <style>
      #map {
        height: 535px;
        width: 100%;
        border: 1px solid #272727;
        border-radius: 15px;
      }

      body {
        background-color: #ddd;
        color: #272727;
        font-family: arial;
        padding: 50px;
        overflow-y: hidden;
      }

      footer {
        text-align: center;
        margin: 1.5em;
      }
    </style>
  </head>
  <body>
    <header>
      <h1><i class="fa fa-map-o"></i> My Google Maps</h1>
      <h3>Click on the map markers to learn a bit about where I'ved lived.</h3>
      <div id="map"></div>
    </header>
    <script>
      function initMap() {
        // Map options
        var options = {
          zoom: 4,
          center: { lat: 37.0902, lng: -95.7129 },
        };

        // New map
        var map = new google.maps.Map(document.getElementById("map"), options);
        /* commented out to add multiple markers
        // Add marker
        var marker = new google.maps.Marker({
          position: { lat: 37.3382, lng: -121.8863 },
          map: map,
          icon:
            "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
        });

        var infoWindow = new google.maps.InfoWindow({
          content: "<h1>San Jose CA</h1>",
        });

        marker.addListener("click", function () {
          infoWindow.open(map, marker);
        });
        */

        // Array of markers
        var markers = [
          {
            coords: { lat: 41.824, lng: -71.4128 },
            content:
              "<h3>Providence, RI</h3> <h5>Where I took my first breath. I don't have any memories of this city as my family traveled to Long Beach shortly after I was born. I have plans to visit some day.</h5>",
          },
          {
            coords: { lat: 37.3382, lng: -121.8863 },
            iconImage:
              "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
            content:
              "<h3>San Jose, CA (current)</h3><h5>This has been my most permanent location. I love the diversity here!</h5>",
          },
          {
            coords: { lat: 37.4323, lng: -121.8996 },
            content:
              "<h3>Milpitas, CA</h3> <h5>I've lived here for about a year until we moved to the valley during my HS freshman year.</h5>",
          },
          {
            coords: { lat: 37.7974, lng: -121.2161 },
            content:
              "<h3>Manteca, CA</h3> <h5>I spent most of my HS softmore year here and met alot of sweet people. Lived here for about a year because my mom remarried but we eneded up back in San Jose!.</h5>",
          },
          {
            coords: { lat: 37.7397, lng: -121.4252 },
            content:
              "<h3>Tracy, CA</h3> <h5>After moving back to San Jose, my mom decided to purchase a home in Tracy in which I graduated HS and gave birth to my son and eventually moved back to San Jose!</h5>",
          },
        ];

        // Loop throught markers
        for (var i = 0; 1 < markers.length; i++) {
          // Add marker
          addMarker(markers[i]);
        }

        // Add Marker Function
        function addMarker(props) {
          var marker = new google.maps.Marker({
            position: props.coords,
            map: map,
            // icon: props.iconImage,
          });

          // Check for customicon
          if (props.iconImage) {
            marker.setIcon(props.iconImage);
          }

          // Check content
          if (props.content) {
            var infoWindow = new google.maps.InfoWindow({
              content: props.content,
            });

            marker.addListener("click", function () {
              infoWindow.open(map, marker);
            });
          }
        }
      }
    </script>
    <script
      async
      defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAuHNCaIJcdwDrZg-4rFrGq-9dTQ3khki0&callback=initMap"
    ></script>
    <footer>Created by Lina Hen</footer>
  </body>
</html>