Adding a Google Map with a Marker toYour Website

by tebrown

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Add Map</title>

    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=&v=weekly&channel=2"
      async
    ></script>
  </body>
</html>

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = {
    lat: -25.344,
    lng: 131.036
  };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}