Elevation Chart Toggle

function HomeControl(controlDiv, map) {
  // Set CSS styles for the DIV containing the control
  // Setting padding to 5 px will offset the control
  // from the edge of the map
  controlDiv.style.padding = '5px';
  // Set CSS for the control border
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '1px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.style.borderRadius = '2px';
  controlUI.style.borderColor = 'rgba(0, 0, 0, 0.2902)';
  controlUI.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,0.298039)';
  //controlUI.style.hover = '#000';

  controlUI.title = 'Click to see Elevation data';
  controlDiv.appendChild(controlUI);
  // Set CSS for the control interior
  var controlText = document.createElement('div');
  controlText.style.fontFamily = 'Roboto, sans-serif';
  controlText.style.fontSize = '11px';
  controlText.style.paddingTop = '5px';
  controlText.style.paddingBottom = '5px';
  controlText.style.paddingLeft = '6px';
  controlText.style.paddingRight = '6px';
  controlText.style.color = 'rgb(86, 86, 86)';
  controlText.innerHTML = 'Elevation';
 // controlText.id = "chartbtn";

  controlUI.appendChild(controlText);

	$('.plot').addClass('closed');
	$('#map_container').css('height', winHeight);
	$('#map_canvas').css('height', winHeight - 40 + 'px');
	$('#map_canvas').css('top','40px');


	google.maps.event.addDomListener(controlUI, 'mouseover', function(event) {
	  controlText.style.fontWeight = '500';
	  controlText.style.color = '#000';
	  controlUI.style.backgroundColor = '#eee';
	 });
	google.maps.event.addDomListener(controlUI, 'mouseout', function(event) {
	  controlUI.style.backgroundColor = '#fff';
	  controlText.style.fontWeight = '400';
	  controlText.style.color = 'rgb(86, 86, 86)';
	 });


	google.maps.event.addDomListener(controlUI, 'click', function(event) {

		if( $('.plot').hasClass('open') ) {
		 	$('.plot').animate({"bottom" : "-190px"}, 200).removeClass('open').addClass('closed');;
		    $('#map_canvas').height( winHeight - 40 + 'px');
			google.maps.event.trigger(map, 'resize');
			//map.panBy(0, -50);
			map.fitBounds(bounds);
		}
		else {

		    $('.plot').animate({"bottom" : "0px"}, 200).removeClass('closed').addClass('open');
		    $('#map_canvas').height( winHeight - 230 + 'px');
			google.maps.event.trigger(map, 'resize');
			//map.panBy(0, 190);
			var newbounds = map.getBounds();
			map.fitBounds(newbounds);
			//map.panBy(0, 50);

			}
	});
}

  var homeControlDiv = document.createElement('div');
  var homeControl = new HomeControl(homeControlDiv, map);

  homeControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);