Maps API v3 base map

by upsidown

HTML

<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<!-- Credits for this code example: @MrUpsidown https://stackoverflow.com/users/1238965/mrupsidown -->
<div id="map-canvas"></div>
<div id="pageYOffset"></div>

CSS

#map-canvas {
  margin-top: 800px;
  height: 300px;
  width: 300px;
}

#pageYOffset {
  margin-bottom: 800px;
}

JavaScript

function initialize() {

  const mapOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(0, 0)
  };

  const map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  const marker = new google.maps.Marker({
    position: new google.maps.LatLng(0, 0),
    map: map,
    title: 'Nothing here'
  });

  const infowindow = new google.maps.InfoWindow({
    content: 'Hello World'
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });

  google.maps.event.addListener(infowindow, 'closeclick', function() {
    displayVerticalOffset();
  });

  window.onscroll = function() {
    displayVerticalOffset();
  };
}

function displayVerticalOffset() {
  document.getElementById('pageYOffset').innerHTML = 'Vertical offset: ' + window.pageYOffset + 'px'
}

initialize();