<style type="text/css">

body {

  margin: 0;

}

#map-canvas {

  width: 100%;

  height: 100vh;

  margin: auto;

}

.map-marker.running {

  background-image: url(//d30y9cdsu7xlg0.cloudfront.net/png/27587-84.png);

}

.map-marker {

  width: 45px;

  height: 45px;

  background: #485F6E center no-repeat;

  background-size: 80%;

  position: relative;

  z-index: 30;

  cursor: pointer;

}

.map-marker:after {

  position: absolute;

  left: 50%;

  bottom: -8px;

  margin-left: -8px;

  width: 0;

  height: 0;

  border-left: 8px solid transparent;

  border-right: 8px solid transparent;

  border-top: 8px solid #485F6E;

  content: " ";

}

.map-marker:hover {

  background-color: #39c360;
  transition: 0.3s background-color;

}

.map-marker:hover:after {

  border-top-color: #39c360;

  transition: 0.3s border-top-color;

}
