Simple Panel Over Google Map

by Lawrence Ross

HTML

<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<div id="infoWindow"></div>
<div id="map_div" style="height: 400px;"></div>

CSS

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1, p {
  margin: 0;
  padding: 0;
}

#map_div {
	z-index: 0;
	position: absolute;
	top: 0px;
    left: 200px;
    right: 0;
    bottom: 0px;
    width: calc( 100% - 200px);
}

#infoWindow {
	z-index: 10;
	top: 0px;
	position: absolute;
    width: 200px;
    bottom: 0px;
	-webkit-box-shadow: 1px 0px 2px 0px rgba(0,0,0,0.43);
	-moz-box-shadow: 1px 0px 2px 0px rgba(0,0,0,0.43);
	box-shadow: 1px 0px 2px 0px rgba(0,0,0,0.43);
}

JavaScript

var toggle = true;

google.maps.event.addDomListener(window, "load", function () {

  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
  $('#infoWindow').click(function(){
    if(toggle){
    	$('#infoWindow').animate({left: -160});
    	$('#map_div').animate({width: $('#map_div').width() + 160, left: 40}, function() {
    	google.maps.event.trigger(map,'resize');
      });
    }else{
      $('#infoWindow').animate({left: 0})
      $('#map_div').animate({width: $('#map_div').width() - 160, left: 200}, function() {
    	google.maps.event.trigger(map,'resize');
      });
    }
    toggle = !toggle;
  });
});