Google Maps API Example with Marker and Defenition

jQuery(document).ready(function($){
    //Местоположение: долгота, широта и коэффициент увеличения
    var latitude = 55.675099,
        longitude = 37.617163,
        map_zoom = 11;

    //Адрес до иконки с маркером
    var marker_url = 'assets/img/icons/map.png';


    var	main_color = '#607D8B', //основной цвет
        saturation_value= 10, //насыщенность
        brightness_value= -1; //яркость
        
        
    // Информационное сообщение
    var infowindow = new google.maps.InfoWindow({ 
        size: new google.maps.Size(150,50)
    });

    //Стили для элементов на карте
    var style= [
        {
            //Насыщенность обозначений на карте
            elementType: "labels",
            stylers: [
                {saturation: saturation_value}
            ]
        },
        {	//Скрываем обозначения станций метро, вокзалов, аэропортов и прочих транспортных узов на карте
            featureType: "poi",
            elementType: "labels",
            stylers: [
                {visibility: "off"}
            ]
        },
        {
            //Скрываем обозначение дорог на карте
            featureType: 'road.highway',
            elementType: 'labels',
            stylers: [
                {visibility: "off"}
            ]
        },
        {
            //Скрываем обозначение локальных дорог
            featureType: "road.local",
            elementType: "labels.icon",
            stylers: [
                {visibility: "off"}
            ]
        },
        {
            //Скрываем обозначение магистрали на карте
            featureType: "road.arterial",
            elementType: "labels.icon",
            stylers: [
                {visibility: "off"}
            ]
        },
        {
            //Скрываем дорожные обозначения на карте
            featureType: "road",
            elementType: "geometry.stroke",
            stylers: [
                {visibility: "off"}
            ]
        },
        //Стили для разных элементов на карте
        {
            featureType: "transit",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" },
                { lightness: brightness_value },
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "poi",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" },
                { lightness: brightness_value },
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "poi.government",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" },
                { lightness: brightness_value },
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "poi.sport_complex",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" },
                { lightness: brightness_value },
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "poi.attraction",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" },
                { lightness: brightness_value },
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "poi.business",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" },
                { lightness: brightness_value },
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "transit",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" },
                { lightness: brightness_value },
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "transit.station",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" },
                { lightness: brightness_value },
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "landscape",
            stylers: [
                { hue: main_color },
                { visibility: "on" },
                { lightness: brightness_value },
                { saturation: saturation_value }
            ]

        },
        {
            featureType: "road",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" },
                { lightness: brightness_value },
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "road.highway",
            elementType: "geometry.fill",
            stylers: [
                { hue: main_color },
                { visibility: "on" },
                { lightness: brightness_value },
                { saturation: saturation_value }
            ]
        },
        {
            featureType: "water",
            elementType: "geometry",
            stylers: [
                { hue: main_color },
                { visibility: "on" },
                { lightness: brightness_value },
                { saturation: saturation_value }
            ]
        }
    ];

    //Создание точки на карте
    var map_options = {
        center: new google.maps.LatLng(55.740996, 37.616081),
        zoom: map_zoom,
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: true,
        styles: style
    }



    //Инициализация карты
    var map = new google.maps.Map(document.getElementById('google-container'), map_options);
    //Добавляем свой маркер местонахождения на карту (свою иконку)
    var marker1 = new google.maps.Marker({
        position: new google.maps.LatLng(latitude, longitude),
        map: map,
        visible: true,
        icon: marker_url,
    });

    var marker2 = new google.maps.Marker({
        position: new google.maps.LatLng(55.609580, 37.605037),
        map: map,
        visible: true,
        icon: marker_url,
    });

    var marker3 = new google.maps.Marker({
        position: new google.maps.LatLng(55.841615, 37.496284),
        map: map,
        visible: true,
        icon: marker_url,
    });

    var marker4 = new google.maps.Marker({
        position: new google.maps.LatLng(55.837222, 37.453088),
        map: map,
        visible: true,
        icon: marker_url,
    });
    
    var contentString1 = '<div class="infowindow"><img src="assets/img/icons/map-image.png" /><span>м.Нагорная</span>, Электронный<br>пр-д, дом3, строение 2</div>';

    //Добавляем свои иконки для кнопок увеличить/уменьшить на карту
    function CustomZoomControl(controlDiv, map) {
        var controlUIzoomIn= document.getElementById('zoom-in'),
            controlUIzoomOut= document.getElementById('zoom-out');
        controlDiv.appendChild(controlUIzoomIn);
        controlDiv.appendChild(controlUIzoomOut);

        //Делаем привязку для кнопок увеличить/уменьшить при клике
        google.maps.event.addDomListener(controlUIzoomIn, 'click', function() {
            map.setZoom(map.getZoom()+1)
        });
        google.maps.event.addDomListener(controlUIzoomOut, 'click', function() {
            map.setZoom(map.getZoom()-1)
        });
    }
    
    google.maps.event.addListener(marker1, 'click', function() {
        infowindow.setContent(contentString1); 
        infowindow.open(map,marker1);
    });

    var zoomControlDiv = document.createElement('div');
    var zoomControl = new CustomZoomControl(zoomControlDiv, map);

    //Помещаем кнопки увеличить/уменьшить на карту в левый верхний угол
    map.controls[google.maps.ControlPosition.LEFT_TOP].push(zoomControlDiv);
});