Simple Map

by fredd man

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

<script>
function initMap() {

  var myLatlng = new google.maps.LatLng(42.3730492, -71.0499857);
  var mapOptions = {
    zoom: 15,
    center: myLatlng,

  };
  var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Dryft Revere!'
  });
  var infoWindow = new google.maps.InfoWindow({
    content: "Pier 6"
  });
  marker.addListener('click', function(evt) {
    infoWindow.open(map, marker);
  });
  google.maps.event.trigger(marker, "click");
}

</script>

CSS

html,
body, #map {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

function initMap() {

  var myLatlng = new google.maps.LatLng(42.3730492, -71.0499857);
  var mapOptions = {
    zoom: 15,
    center: myLatlng,

  };
  var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Dryft Revere!'
  });
  var infoWindow = new google.maps.InfoWindow({
    content: "Pier 6"
  });
  marker.addListener('click', function(evt) {
    infoWindow.open(map, marker);
  });
  google.maps.event.trigger(marker, "click");
}