N
N
Nikita Shchypylov2016-05-28 12:50:40
Google
Nikita Shchypylov, 2016-05-28 12:50:40

Need help customizing the Google Maps API?

Hello everyone , I
have this HTML markup:

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

And JS code with map customization:
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);

}

The problem is that the point on the map that I indicated in the address tag does not work. What do you think, what could be the problem?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question