wp-acf-google-map-options-marker-style-javascript.js

jQuery(document).ready(function($){

    // Google Map Init
    acf.add_action('google_map_init', function(map, marker, $field){
        google.maps.event.addListener(map, 'zoom_changed', function(e){
            this.$el.closest('.acf-field-google-map').find('.hwk_google_map_zoom').val(this.getZoom()).trigger('change');
        });
    });

    // Google Map Args
    acf.add_filter('google_map_args', function(el, field){

        map_args = {
            scrollwheel:    el.scrollwheel,
            zoom:           el.zoom,
            center:         el.center,
            mapTypeId:      el.mapTypeId     
        };

        var zoom = $(field).find('.hwk_google_map_zoom');
        if(zoom.length)
            map_args.zoom = parseInt(zoom.val());

        var style_user = $(field).find('.hwk_google_map_style_user');
        if(style_user.length){
            map_args.styles = $.parseJSON(style_user.val());

        }else{
            var style = $(field).find('.hwk_google_map_style_default');
            if(style.length)
                map_args.styles = $.parseJSON(style.val());

        }

        return map_args;
    });

    // Google Map Markers Args
    acf.add_filter('google_map_marker_args', function(el, field){
        var icon = $(field).find('.hwk_google_map_icon input:checked');
        if(icon.length == 0)
            return el;

        marker_args = {
            draggable:      el.draggable,
            raiseOnDrag:    el.raiseOnDrag,
            map:            el.map,
            icon:           {
                url:        icon.val(),
                scaledSize: new google.maps.Size(50, 50)
            }
        };
        return marker_args;
    });

    // Icon
    if($('.hwk_google_map_icon').length){
        $('.hwk_google_map_icon input').click(function(e){
            var id = $(this).closest('.acf-field-google-map').find('> .acf-input > .acf-google-map').attr('id');
            var googlemap = acf.fields.google_map.maps[id];
            var icon = $(this).val();

            var marker = googlemap.marker.setIcon({
                url: icon,
                scaledSize: new google.maps.Size(50, 50)
            });
        });
    }

    // Zoom Range
    if($('.hwk_google_map_zoom').length){
        $('.hwk_google_map_zoom').on('input', function(e){
            var id = $(this).closest('.acf-field-google-map').find('> .acf-input > .acf-google-map').attr('id');
            var googlemap = acf.fields.google_map.maps[id];
            var val = parseInt($(this).val());

            var zoom = googlemap.setZoom(val);
        });
    }

    // Style: User
    if($('.hwk_google_map_style_user').length){
        $('.hwk_google_map_style_user').on('input change paste keyup', function(e){
            var val = $(this).val();
            var id = $(this).closest('.acf-field-google-map').find('> .acf-input > .acf-google-map').attr('id');
            var googlemap = acf.fields.google_map.maps[id];

            if(val == ''){
                $(this).removeClass('error');
                var style = googlemap.setOptions({
                    styles: ''
                });
                return;
            }

            try{
                var json = $.parseJSON(val);
            }catch(err){
                var json = null
            }

            if(!json){
                $(this).addClass('error');
                return;
            }

            $(this).removeClass('error');
            var style = googlemap.setOptions({
                styles: json
            });

        });
    }

});