Поясните что делает функция

[orange8031]

Добрый день. Сам верстальщик немного понимаю понимаю яваскрипт. сейчас стала задача, есть карта гугл 100% ширина и на ней маркер с координатами. Все это дело расположено по центру(маркер). Но над картой есть еще блок с контактами его размер 50% он закрывает маркер (то-есть у этого блока контактов есть кнопка свернуть событие .click вызывает фукцию происходит добавление класса или заменение и блок контакты сворачивается) и маркер становится видно как и должно быть. Проблема в том, что при открытом блоке контакты карта должна смещаться что-бы маркер был виден.
Ребята подскажите пожалуйста как это можно реализовать очень нужно
вот фукция

google.maps.event.addDomListener(window, "load", e), $(".contacts-left__close-button").click(function() {
        $(".contacts-left").toggleClass("g-mini"), $(".contacts-left__content-wrap").hasClass("g-hide") ? $(".contacts-left__content-wrap").delay(200).show(100).removeClass("g-hide") : $(".contacts-left__content-wrap").hide(100).addClass("g-hide"), $(this).toggleClass("rotate-close")
    })

Вообщем короче поставил карту 60% (при помощи добавления класса .s-contacts-map) как мне при помощи JS отловить класс g-mini и удалить в css либо изменить эти 60% или просто удалить тот класс который я добавил в css?

[Dilettante_Pro]

orange8031,
Покажите html там, где
<div id="map_canvas"
и что над ним?

[orange8031]

<section class="s-contacts" id="contact">
			<div id="map" class="s-contacts-map"></div>
			<div class="contacts-left">
				<div class="contacts-left__content-wrap">
					<h2 class="s-contacts__title">Как добраться</h2>
					<div class="s-contacts__info-wrap">
						
<p class="s-contacts__info"></p>
<p class="s-contacts__info"></p>
<p class="s-contacts__info"></p>
<p class="s-contacts__info"></p>
<p class="s-contacts__info"></p>
<p class="s-contacts__phone"></p>
<p class="s-contacts__phone"></p>
<p class="s-contacts__phone"></p>

					</div>
				</div>
				<div class="contacts-left__close-button">&lt;</div>
			</div>
		</section>

[Dilettante_Pro]

orange8031,
а сам <div id="map_canvas" как прописан?

[orange8031]

$(document).ready(function() {
    function e() {
    	var myLatLng = {lat: 50.378708, lng: 30.441869};
        var e = document.getElementById("map"),
            t = {
                center: myLatLng,
                zoom: 15,
                scrollwheel: !8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
        var gmap = new google.maps.Map(e, t);

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: gmap,
          title: 'SmartKart'
        });        
        marker.setMap(gmap);
        

        var contentString = '<div id="gmap_content">'+
	            '<h2 style="margin: 50px 0 25px 0; padding-top: 0px;" class="firstHeading"></h2>'+
	            '<div id="bodyContent">'+
		            '<p><p>' +
		            '<p><p>' +
		            '<p>Время работы:<p>' +
		            '<p style="padding-left: 15px;">ПН-ПТ – 12:00 – 23:00<p>' +
		            '<p style="padding-left: 15px;">СБ-ВС – 09:00 – 23:00<p>' +
	            '</div>'+
            '</div>';

        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });

        marker.addListener('click', function() {
          infowindow.open(gmap, marker);
        });

    }

[Dilettante_Pro]

orange8031,
Я имел в виду именно html
<div id="map_canvas" как прописан?

Вообщем короче поставил карту 60% (при помощи добавления класса .s-contacts-map)

к чему добавлен класс .s-contacts-map? и что в нем прописано?

при помощи JS отловить класс g-mini и удалить в css

По какому событию? У всех элементов, у которых есть этот класс?

[orange8031]

Canvas нет нигде выше я исправил код. Я мне нужно удалить класс .s-contacts-map только если в коде в HTML добавляется класс .contacts-left g-mini а добавляется он в этой функции насколько я понимаю это не важно,

google.maps.event.addDomListener(window, "load", e), $(".contacts-left__close-button").click(function() {
        $(".contacts-left").toggleClass("g-mini"), $(".contacts-left__content-wrap").hasClass("g-hide") ? $(".contacts-left__content-wrap").delay(200).show(100).removeClass("g-hide") : $(".contacts-left__content-wrap").hide(100).addClass("g-hide"), $(this).toggleClass("rotate-close")
    })

[Dilettante_Pro]

orange8031,
Почитал вашу переписку c рони и предлагаю посмотреть такой пример - это не точно ваша проблема, но макет для размышления, кликайте по синему полю

<!DOCTYPE html>
<html>

<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>

html, body {height:100%;}
#header 
{   position: absolute;
    background-color: blue;
    width:100%;
    }
#map  
{   position:relative;
    height: 60%;}
.m-topb {top:20%;}
.m-topm {top:60%;}
    
.h-big {height: 60%;}
.h-mini {height: 20%;} 
       
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script>
    $(document).ready(function () {
        function e() {
            var myLatLng = { lat: 50.378708, lng: 30.441869 };
            var e = document.getElementById("map"),
            t = {
                center: myLatLng,
                zoom: 15,
                scrollwheel: !8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var gmap = new google.maps.Map(e, t);

            var marker = new google.maps.Marker({
                position: myLatLng,
                map: gmap,
                title: 'SmartKart'
            });
            marker.setMap(gmap);
            var contentString = '<div id="gmap_content">' +
	            '<h2 style="margin: 50px 0 25px 0; padding-top: 0px;" class="firstHeading"></h2>' +
	            '<div id="bodyContent">' +
		            '<p><p>' +
		            '<p><p>' +
		            '<p>Время работы:<p>' +
		            '<p style="padding-left: 15px;">ПН-ПТ – 12:00 – 23:00<p>' +
		            '<p style="padding-left: 15px;">СБ-ВС – 09:00 – 23:00<p>' +
	            '</div>' +
            '</div>';

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            marker.addListener('click', function () {
                infowindow.open(gmap, marker);
            });
        }
        google.maps.event.addDomListener(window, 'load', e);
        $('#header').addClass('h-big');
        $('#map').addClass('m-topm');
        $('#header').on('click', function () {
            $(this).toggleClass('h-big h-mini');
            $('#map').toggleClass('m-topm m-topb');
        });

    });
</script>
</head>
<body>
  <section>
  <div id="header"></div>
  </section>
<div id="map" ></div>
</body>
</html>

[orange8031]

Спасибо за помощь и вообще... Вопрос решил вот так

$(".contacts-left__close-button").click(function() {
        $("#map").toggleClass("s-contacts-map")
    });

[orange8031]

И то не я а помогли