A Pen by Jordan Maslyn

Thumbnail
This awesome code was written by jmm, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jmm ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Jordan Maslyn</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section id="map-container">
  <div id="map-details">
    <h2>Details</h2>
    <p>Lacinia egestas congue. Sagittis vulputate parturient elit ullamcorper euismod nulla metus, consequat duis velit vitae pulvinar cursus class penatibus, orci eget augue placerat egestas aliquet. Venenatis natoque auctor rhoncus ad molestie maecenas vestibulum quam, vivamus interdum nam dis parturient ultricies dui.</p>
      <p>Fames lobortis magnis eget est habitasse duis. Feugiat tempor mollis fringilla maecenas proin interdum diam praesent libero ultrices mi massa sociosqu, felis ullamcorper elit aenean donec urna cum quisque taciti bibendum ipsum habitasse.</p>
  </div>
  <map id="map"></map>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/jmm/a-pen-by-jordan-maslyn-gGrgwy */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-container {
  height: 100%;
}

#map-details {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  background: #fff;
  z-index: 3;
  transform: translateX(-100%);
  transition: transform 200ms ease;
}
#map-details.is-revealed {
  transform: translateX(0);
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}


/*Downloaded from https://www.codeseek.co/jmm/a-pen-by-jordan-maslyn-gGrgwy */
loadScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyDfveYm9Y1iBb6aOsk8kNNW_V9OHOsRYgo', initApp);

function initApp() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8
  });

  var marker = new google.maps.Marker({
    position: { lat: -34.397, lng: 150.644 },
    map: map,
    title: 'Hello World!'
  });

  marker.addListener('click', toggleDetails);

  function toggleDetails() {
    document.getElementById('map-details').classList.toggle('is-revealed');
    recenterMap();
  }

  function recenterMap() {
    map.setCenter({ lat: -34.397, lng: 150.644 });
    if (document.getElementById('map-details').classList.contains('is-revealed')) {
      map.panBy(-300, 0);
    }
  }

  window.addEventListener('resize', function () {
    recenterMap();
  });
}

function loadScript(src) {
  var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

  var s, r, t;
  r = false;
  s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = src;
  s.onload = s.onreadystatechange = function () {
    if (!r && (!this.readyState || this.readyState == 'complete')) {
      r = true;
      if (callback) {
        callback();
      }
    }
  };
  t = document.getElementsByTagName('script')[0];
  t.parentNode.insertBefore(s, t);
}

Comments