customize google maps

custom-g-map.js

var map;
var mode;
var address;
var coords;

function initMap() {
    setTimeout(function(){
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var customMapType = new google.maps.StyledMapType([
            // road
            {
                "featureType": "road",
                "elementType": "geometry.fill",
                "stylers": [
                    { "color": "#ffffff" },
                    { "weight": 1.4 }
                ] },{
                "featureType": "road",
                "elementType": "geometry.stroke",
                "stylers": [
                    { "color": "#d3d3d3" }
                ] },
            // road label
            {
                "featureType": "road",
                "elementType": "labels.text.fill",
                "stylers": [
                    { "color": "#686868" },
                    { "weight": 1.4 }
                ] },{
                "featureType": "road",
                "elementType": "labels.text.stroke",
                "stylers": [
                    { "color": "#ffffff" },
                    { "weight": 1.4 }
                ] },
            // geometry
            {
                "featureType": "landscape",
                "elementType": "geometry",
                "stylers": [
                    { "saturation": -100 },
                    { "gamma": 0.06 },
                    { "lightness": 90 }
                ] },{
                "featureType": "landscape",
                "elementType": "geometry.stroke",
                "stylers": [
                    { "color": "#d3d3d3" },
                    { "weight": 1.4 }
                ] },{
                "featureType": "administrative",
                "elementType": "geometry",
                "stylers": [
                    { "saturation": -100 },
                    { "gamma": 0.06 },
                    { "lightness": -390 }
                ] },{
                "featureType": "poi",
                "elementType": "geometry",
                "stylers": [
                    { "saturation": -100 },
                    { "lightness": -390 },
                    { "gamma": 0.06 }
                ] },
            // geometry text
            {
                "featureType": "geometry",
                "elementType": "labels.text.fill",
                "stylers": [
                    { "color": "#686868" },
                    { "weight": 1.4 }
                ] },{
                "featureType": "geometry",
                "elementType": "labels.text.stroke",
                "stylers": [
                    { "color": "#ffffff" },
                    { "weight": 1 }
                ] },
            //nature
            {
                "featureType": "poi",
                "elementType": "geometry.fill",
                "stylers": [
                    { "color": "#d3d3d3" }
                ] },{
                "featureType": "water",
                "elementType": "geometry.fill",
                "stylers": [
                    { "color": "#a8a8a8" }
                ] },{
                "featureType": "transit",
                "elementType": "geometry",
                "stylers": [
                    { "saturation": -100 },
                    { "lightness": -73 },
                    { "gamma": 0.6 }
                ] }], {
            name: 'Custom Style'
        });
        var customMapTypeId = 'custom_style';
        var mapDiv = document.getElementById('map-direction');
        var geocoder = new google.maps.Geocoder();

        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 55.6618222, lng: 37.4778604},
            zoom: 16,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
            }
        });

        var image = '../../../img/icon--map-label.png';
        var beachMarker = new google.maps.Marker({
            position: {lat: 55.6629296, lng: 37.4818851},
            map: map,
            icon: image
        });

        map.mapTypes.set(customMapTypeId, customMapType);
        map.setMapTypeId(customMapTypeId);
        directionsDisplay.setMap(map);


        google.maps.event.addDomListener(mapDiv, 'click', function() {
            setDirection();
        });

        // прокрутка до элемента
        $('body').on('click','.map-direction__mode label', function(){
            $(this).find('input').prop( "checked", true );
            setDirection();
        });

        function setDirection(){
            mode = $('.map-direction__mode label input:checked').prop('value');
            address = $('.map-direction__adress input').prop('value');
            geocodeAddress(geocoder, map);
        }

        function geocodeAddress(geocoder, resultsMap) {

            geocoder.geocode({'address': address}, function(results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                    coords = results[0].geometry.location;
                    calculateAndDisplayRoute(directionsService, directionsDisplay);
                } else {
                    $('.direction__adress').addClass('error-adress');
                }
            });
        }
        function calculateAndDisplayRoute(directionsService, directionsDisplay) {

            var svg = $('.slide-contacts__svg path');
            TweenMax.staggerTo(svg, 1,
                {drawSVG: '0%'}, 0.3);
            $('.slide-contacts').addClass('close');

            directionsService.route({
                origin: {lat: coords.H, lng: coords.L},
                destination: {lat: 55.6629296, lng: 37.4818851},
                travelMode: google.maps.TravelMode[mode]
            }, function(response, status) {
                if (status === google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                } else {
                    $('.direction__adress').addClass('error-direction');
                }
            });
        }
    },2000);
}