Map

index.html

<div id="map-canvas"></div>
<div id="streetview"></div>

map.markdown

Map

A Pen by Studio Lunter on CodePen.

License.

script.js

function initialize() {
  var styles = [
    {
      featureType: "water",
      elementType: "geometry",
      stylers: [
        {
          color: "#e9e9e9"
        },
        {
          lightness: 17
        }
      ]
    },
    {
      featureType: "landscape",
      elementType: "geometry",
      stylers: [
        {
          color: "#f5f5f5"
        },
        {
          lightness: 20
        }
      ]
    },
    {
      featureType: "road.highway",
      elementType: "geometry.fill",
      stylers: [
        {
          color: "#ffffff"
        },
        {
          lightness: 17
        }
      ]
    },
    {
      featureType: "road.highway",
      elementType: "geometry.stroke",
      stylers: [
        {
          color: "#ffffff"
        },
        {
          lightness: 29
        },
        {
          weight: 0.2
        }
      ]
    },
    {
      featureType: "road.arterial",
      elementType: "geometry",
      stylers: [
        {
          color: "#ffffff"
        },
        {
          lightness: 18
        }
      ]
    },
    {
      featureType: "road.local",
      elementType: "geometry",
      stylers: [
        {
          color: "#ffffff"
        },
        {
          lightness: 16
        }
      ]
    },
    {
      featureType: "poi",
      elementType: "geometry",
      stylers: [
        {
          color: "#f5f5f5"
        },
        {
          lightness: 21
        }
      ]
    },
    {
      featureType: "poi.park",
      elementType: "geometry",
      stylers: [
        {
          color: "#dedede"
        },
        {
          lightness: 21
        }
      ]
    },
    {
      elementType: "labels.text.stroke",
      stylers: [
        {
          visibility: "on"
        },
        {
          color: "#ffffff"
        },
        {
          lightness: 16
        }
      ]
    },
    {
      elementType: "labels.text.fill",
      stylers: [
        {
          saturation: 36
        },
        {
          color: "#333333"
        },
        {
          lightness: 40
        }
      ]
    },
    {
      elementType: "labels.icon",
      stylers: [
        {
          visibility: "off"
        }
      ]
    },
    {
      featureType: "transit",
      elementType: "geometry",
      stylers: [
        {
          color: "#f2f2f2"
        },
        {
          lightness: 19
        }
      ]
    },
    {
      featureType: "administrative",
      elementType: "geometry.fill",
      stylers: [
        {
          color: "#fefefe"
        },
        {
          lightness: 20
        }
      ]
    },
    {
      featureType: "administrative",
      elementType: "geometry.stroke",
      stylers: [
        {
          color: "#fefefe"
        },
        {
          lightness: 17
        },
        {
          weight: 1.2
        }
      ]
    }
  ];

  var myLatlng = new google.maps.LatLng(53.226071, 6.56330614);
  var mapOptions = {
    zoom: 16,
    center: myLatlng,
    disableDefaultUI: true,
    // scrollwheel: false,
    styles: styles
  };

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

  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById("streetview"),
    {
      position: myLatlng,
      pov: {
        heading: 160,
        pitch: 0
      }
    }
  );
  map.setStreetView(panorama);

  /*	
	// Example standard marker
	var marker = new google.maps.Marker({
		position: myLatlng,
		map: map,
		title: 'Hello World!'
	});
*/

  overlay = new CustomMarker(myLatlng, map, {
    marker_id: "Studio Lunter"
  });
}

google.maps.event.addDomListener(window, "load", initialize);

// custom marker
function CustomMarker(latlng, map, args) {
  this.latlng = latlng;
  this.args = args;
  this.setMap(map);
}

CustomMarker.prototype = new google.maps.OverlayView();

CustomMarker.prototype.draw = function() {
  var self = this;

  var div = this.div;

  if (!div) {
    div = this.div = document.createElement("div");

    div.className = "marker";

    div.innerHTML = '<div class="pin"></div><div class="pulse"></div>';
    div.style.position = "absolute";
    div.style.cursor = "pointer";
    div.style.width = "30px";
    div.style.height = "30px";
    // div.style.background = 'blue';

    if (typeof self.args.marker_id !== "undefined") {
      div.dataset.marker_id = self.args.marker_id;
    }

    google.maps.event.addDomListener(div, "click", function(event) {
      alert("You clicked on a custom marker!");
      google.maps.event.trigger(self, "click");
    });

    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
  }

  var point = this.getProjection().fromLatLngToDivPixel(this.latlng);

  if (point) {
    div.style.left = point.x - 10 + "px";
    div.style.top = point.y - 35 + "px";
  }
};

CustomMarker.prototype.remove = function() {
  if (this.div) {
    this.div.parentNode.removeChild(this.div);
    this.div = null;
  }
};

CustomMarker.prototype.getPosition = function() {
  return this.latlng;
};

style.scss

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

#map-canvas,
#streetview {
  float: left;
  height: 100%;
  width: 50%;
}

.pin {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: #222;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
  &:after {
    content: "";
    width: 14px;
    height: 14px;
    margin: 8px 0 0 8px;
    background: #e6e6e6;
    position: absolute;
    border-radius: 50%;
  }
}

.bounce {
  animation-name: bounce;
  animation-fill-mode: both;
  animation-duration: 1s;
}

.pulse {
  background: #d6d4d4;
  border-radius: 50%;
  height: 14px;
  width: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 11px 0px 0px -12px;
  transform: rotateX(55deg);
  z-index: -2;
  &:after {
    content: "";
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: absolute;
    margin: -13px 0 0 -13px;
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
    box-shadow: 0 0 1px 2px #333;
    animation-delay: 1.1s;
  }
}

@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}

@keyframes bounce {
  0% {
    opacity: 0;
    transform: translateY(-2000px) rotate(-45deg);
  }

  60% {
    opacity: 1;
    transform: translateY(30px) rotate(-45deg);
  }

  80% {
    transform: translateY(-10px) rotate(-45deg);
  }

  100% {
    transform: translateY(0) rotate(-45deg);
  }
}