WeBike Maps

by PhilQ

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css">
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjjVxUOCVkgbXyoiy3WMPlIqYuswBpxks&language=en&region=NL&callback=initMap" type="text/javascript"></script>

SCSS

$near-black: #252525;
$grey: #555;
$near-white: #f2f2f2;
$blue-lighter: #a8e1ff;
$blue-light: #50b9e1;
$blue: #08578c;
$blue-dark: #152a3f;
$red: #c4060e;
$tripadvisor: #00a680;


#map {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 350px;
}

.maps-popup {
	$border-radius: 8px;
	$arrow-size: 8px;
	$arrow-spacing: 4px;
	$bg-color: #fff;
	$shadow-color: #000;
	$shadow-opacity: 0.3;
	position: absolute;
	display: block;
	border-radius: $border-radius;
	box-shadow: 0px 1px 10px 0px rgba($shadow-color, $shadow-opacity);
	z-index: 0;
	cursor: auto;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	text-align: center;
	color: $near-black;

	i.blue {
		color: $blue;
		color: $blue-light;
		font-size: 12px;
	}

	b.red {
		color: $red;
	}

	> button {
		position: absolute;
		z-index: 3;
		top: 2px;
		right: 2px;
		width: 20px;
		height: 20px;
		background: transparent;
		border: 0px;
		cursor: pointer;
		outline: none;
		opacity: 0.1;

		&::before, &::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			display: inline-block;
			width: 12px;
			height: 2px;
			background-color: #000;
			transform-origin: 50% 50%;
			transform: translate(-50%, -50%) rotate(-45deg);
		}

		&::after {
			transform: translate(-50%, -50%) rotate(45deg);
		}

		&:hover, &:focus {
			opacity: 0.5;

			&::before, &::after {
				//
			}
		}
	}

	> div {
		z-index: 2;
		position: relative;
		display: inline-block;
		padding: 15px 25px;
		background-color: $bg-color;
		border-radius: $border-radius;

		a {
			float: right;
			display: inline-block;
			color: #50b9e1;
			margin-top: 3px;
			padding: 7px 0px;
			padding: 9px 0px;
			margin-right: -10px;
			margin-bottom: -7px;
			font-size: 11px;
			text-decoration: none;

			.fas {
				font-size: 20px;
				font-size: 16px;
				margin-left: 5px;
				vertical-align: middle;
			}

			&:hover, &:focus {
				color: $blue;
			}
		}
	}

	&::before, &::after {
		content: '';
		display: inline-block;
		z-index:...

JavaScript

var Popup;
var map;
var map_popup = null;
var map_infowindow = null;
var map_styles = [
	{
		"featureType": "administrative.locality",
		"elementType": "labels",
		"stylers": [
			{
				"visibility": "off"
			}
		]
	},
	{
		"featureType": "landscape.man_made",
		"elementType": "geometry",
		"stylers": [
			{
				"color": "#f7f1df"
			}
		]
	},
	{
		"featureType": "landscape.natural",
		"elementType": "geometry",
		"stylers": [
			{
				"color": "#d0e3b4"
			}
		]
	},
	{
		"featureType": "landscape.natural.terrain",
		"elementType": "geometry",
		"stylers": [
			{
				"visibility": "off"
			}
		]
	},
	{
		"featureType": "poi",
		"elementType": "labels",
		"stylers": [
			{
				"visibility": "off"
			}
		]
	},
	{
		"featureType": "poi.business",
		"elementType": "all",
		"stylers": [
			{
				"visibility": "off"
			}
		]
	},
	{
		"featureType": "poi.medical",
		"elementType": "geometry",
		"stylers": [
			{
				"color": "#fbd3da"
			}
		]
	},
	{
		"featureType": "poi.park",
		"elementType": "geometry",
		"stylers": [
			{
				"color": "#bde6ab"
			}
		]
	},
	{
		"featureType": "road",
		"elementType": "geometry.stroke",
		"stylers": [
			{
				"visibility": "off"
			}
		]
	},
	{
		"featureType": "road.highway",
		"elementType": "geometry.fill",
		"stylers": [
			{
				"color": "#ffe15f"
			}
		]
	},
	{
		"featureType": "road.highway",
		"elementType": "geometry.stroke",
		"stylers": [
			{
				"color": "#efd151"
			}
		]
	},
	{
		"featureType": "road.arterial",
		"elementType": "geometry.fill",
		"stylers": [
			{
				"color": "#ffffff"
			}
		]
	},
	{
		"featureType": "road.local",
		"elementType": "geometry.fill",
		"stylers": [
			{
				"color": "black"
			}
		]
	},
	{
		"featureType": "transit.station.airport",
		"elementType": "geometry.fill",
		"stylers": [
			{
				"color": "#cfb2db"
			}
		]
	},
	{
		"featureType": "water",
		"elementType": "geometry",
		"stylers": [
			{
				"color": "#a2daf2"
			}
		]
	}
];
var map_markers = [];
var map_infoboxes =...