Нужна помощь с кастомизацией Google Maps API?

Question

[Nikita Shchypylov]

Всем привет
Есть такая HTML-разметка:

<section id="google-map">
                        <div id="google-container"></div>
                        <div id="zoom-in"></div>
                        <div id="zoom-out"></div>
                        <address>улица Артема, 80, Киев, город Киев, Украина</address>
                    </section>

И JS-код с кастомизацией карты:

function initialize() {

    // Create an array of styles.
    var latitude = 53.356525,
        longitude = -6.253810,
        map_zoom = 18;

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


    var main_color = '#007148', //основной цвет
        saturation_value= -1, //насыщенность
        brightness_value= 1; //яркость


//Стили для элементов на карте
    var style= [
        {
            "stylers": [
                {
                    "visibility": "on"
                },
                {
                    "saturation": -100
                },
                {
                    "gamma": 0.54
                }
            ]
        },
        {
            "featureType": "road",
            "elementType": "labels.icon",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "water",
            "stylers": [
                {
                    "color": "#4d4946"
                }
            ]
        },
        {
            "featureType": "poi",
            "elementType": "labels.icon",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "poi",
            "elementType": "labels.text",
            "stylers": [
                {
                    "visibility": "simplified"
                }
            ]
        },
        {
            "featureType": "road",
            "elementType": "geometry.fill",
            "stylers": [
                {
                    "color": "#ffffff"
                }
            ]
        },
        {
            "featureType": "road.local",
            "elementType": "labels.text",
            "stylers": [
                {
                    "visibility": "simplified"
                }
            ]
        },
        {
            "featureType": "water",
            "elementType": "labels.text.fill",
            "stylers": [
                {
                    "color": "#ffffff"
                }
            ]
        },
        {
            "featureType": "transit.line",
            "elementType": "geometry",
            "stylers": [
                {
                    "gamma": 0.48
                }
            ]
        },
        {
            "featureType": "transit.station",
            "elementType": "labels.icon",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "road",
            "elementType": "geometry.stroke",
            "stylers": [
                {
                    "gamma": 7.18
                }
            ]
        }

    ];

    //Создание точки на карте
    var map_options = {
        center: new google.maps.LatLng(latitude, longitude),
        zoom: map_zoom,
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        styles: style
    }
    //Инициализация карты
    var map = new google.maps.Map(document.getElementById('google-container'), map_options);
    //Добавляем свой маркер местонахождения на карту (свою иконку)
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(latitude, longitude),
        map: map,
        visible: true,
        icon: marker_url
    });

    //Добавляем свои иконки для кнопок увеличить/уменьшить на карту
    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)
        });
    }

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

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

}

Проблема в том, что не работает точка на карте, которую я указал в теге адреса. Как думаете, в чем может быть проблема?

Comments

[Ivan Bogachev]

Ссылку на codepen в студию!