<div id="wrapper" class="">
	<!-- Sidebar -->
	<div id="sidebar-wrapper">
		<ul class="sidebar-nav" id="side_bar">
			<li class="sidebar-brand" style="font-weight: bold; color: #999999;">
				<h1>Places</h1>
			</li>
			<hr>
		</ul>
	</div>
	<!-- /#sidebar-wrapper -->
	<!-- Page Content -->
	<div id="page-content-wrapper">
		<div class="container-fluid">
			<div class="row">
				<div class="col-lg-12">
					<h1>
						<a href="#menu-toggle" class="gradient-menu" id="menu-toggle"></a> &nbsp;Map&nbsp;
						<!-- a href="#menu-toggle" class="btn btn-default" >Toggle Sidebar</a -->
					</h1>
					<!-- you can use tables or divs for the overall layout -->
					<div id="map_canvas" style="position: relative; overflow: hidden;">
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- /#page-content-wrapper -->
</div>
html,
body {
	height: 100%;
}
#map_canvas,
#wrapper,
#page-content-wrapper {
	height: 100%;
	width: 100%;
}

.container-fluid,
.row,
.col-lg-12 {
	height: 100%;
	width: 100%;
}

/* hamburger menu pseudo element */
.box-shadow-menu {
	position: relative;
	padding-left: 1.25em;
}
.box-shadow-menu:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 1em;
	height: 0.15em;
	background: black;
	box-shadow: 0 0.25em 0 0 black, 0 0.5em 0 0 black;
}
/* hamburger menu pseudo element gradient */
.gradient-menu {
	padding-left: 1.25em;
	position: relative;
}
.gradient-menu:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.21em;
	bottom: 0.21em;
	width: 1em;
	background: linear-gradient(
		to bottom,
		black,
		black 20%,
		white 20%,
		white 40%,
		black 40%,
		black 60%,
		white 60%,
		white 80%,
		black 80%,
		black 100%
	);
}
/* http://www.jqueryscript.net/demo/Bootstrap-Sidebar-Extension-With-jQuery-CSS-CSS3/ */

/*!
 * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Toggle Styles */
.nav-tabs > li {
	float: none;
}
.nav-tabs {
	border-bottom: 0;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
	margin: 0;
	border-radius: 0;
}
#wrapper {
	padding-left: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#wrapper.toggled {
	padding-left: 250px;
}

#sidebar-wrapper {
	z-index: 1000;
	position: fixed;
	left: 250px;
	width: 0;
	height: 100%;
	margin-left: -250px;
	overflow-y: auto;
	background: #000;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
	width: 250px;
}

#page-content-wrapper {
	width: 100%;
	position: absolute;
	padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
	position: absolute;
	margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
	position: absolute;
	top: 0;
	width: 250px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar-nav li {
	color: #999999;
	text-indent: 20px;
	line-height: 40px;
	cursor: pointer;
}

.sidebar-nav li a {
	display: block;
	text-decoration: none;
	color: #999999;
}

.sidebar-nav li a:hover {
	text-decoration: none;
	color: #fff;
	background: rgba(255, 255, 255, 0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
	text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
	height: 65px;
	font-size: 18px;
	line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
	color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
	color: #fff;
	background: none;
}

@media (min-width: 768px) {
	#wrapper {
		padding-left: 250px;
	}

	#wrapper.toggled {
		padding-left: 0;
	}

	#sidebar-wrapper {
		width: 250px;
	}

	#wrapper.toggled #sidebar-wrapper {
		width: 0;
	}

	#page-content-wrapper {
		padding: 20px;
		position: relative;
	}

	#wrapper.toggled #page-content-wrapper {
		position: relative;
		margin-right: 0;
	}
}
View Compiled
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var map = null;

function initialize() {
	var myWrapper = $("#wrapper");
	$("#menu-toggle").click(function(e) {
		e.preventDefault();
		$("#wrapper").toggleClass("toggled");
		myWrapper.one(
			"webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
			function(e) {
				// code to execute after transition ends
				google.maps.event.trigger(map, "resize");
			}
		);
	});
	// create the map
	var myOptions = {
		zoom: 8,
		center: new google.maps.LatLng(43.907787, -79.359741),
		mapTypeControl: true,
		mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		},
		navigationControl: true,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

	google.maps.event.addListener(map, "click", function() {
		infowindow.close();
	});

	// Add markers to the map
	// Set up three markers with info windows
	// add the points
	var point = new google.maps.LatLng(43.65654, -79.90138);
	var marker = createMarker(
		point,
		"This place",
		"Some stuff to display in the<br>First Info Window"
	);

	var point = new google.maps.LatLng(43.91892, -78.89231);
	var marker = createMarker(
		point,
		"That place",
		"Some stuff to display in the<br>Second Info Window"
	);

	var point = new google.maps.LatLng(43.82589, -78.89231);
	var marker = createMarker(
		point,
		"The other place",
		"Some stuff to display in the<br>Third Info Window"
	);
}

var infowindow = new google.maps.InfoWindow({
	size: new google.maps.Size(150, 50)
});

// This function picks up the click and opens the corresponding info window
function myclick(i) {
	google.maps.event.trigger(gmarkers[i], "click");
}

// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
	var contentString = html;
	var marker = new google.maps.Marker({
		position: latlng,
		map: map,
		zIndex: Math.round(latlng.lat() * -100000) << 5
	});

	google.maps.event.addListener(marker, "click", function() {
		infowindow.setContent(contentString);
		infowindow.open(map, marker);
	});
	// save the info we need to use later for the side_bar
	gmarkers.push(marker);
	// add a line to the side_bar html
	var sidebar = $("#side_bar");
	var sidebar_entry = $("<li/>", {
		html: name,
		click: function() {
			google.maps.event.trigger(marker, "click");
		},
		mouseenter: function() {
			$(this).css("color", "red");
		},
		mouseleave: function() {
			$(this).css("color", "#999999");
		}
	}).appendTo(sidebar);
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.j
  3. https://maps.googleapis.com/maps/api/js?key=AIzaSyB-YdZLtBcP6Q-wIMtKv015g-TbrKQtN6Y