Responsive Google Maps Icon (UIKit & AngularJS)

Google Map Directive

App.directive('map', function(){
    return {
        restrict: 'A',
        link: function($scope, element, attrs){

            var pos = attrs.map ? eval('('+attrs.map+')') : {};


            window.map_loaded = function(){

                google.maps.event.addDomListener(window, 'load', function(){

                    //Default options for the map
                    var options = {
                        center: pos,
                        zoom: 18,
                        scrollwheel: false,
                        styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
                    };


                    //Create the actual map
                    map = new google.maps.Map( element[0], options );

                    //This adds the marker to the map
                    marker = new google.maps.Marker({
                        position: pos,
                        map: map,
                        title: 'selesti',
                        animation: google.maps.Animation.DROP,
                        icon: {
                            url: '/assets/img/icons/map-marker-sd.png',
                            Size: new google.maps.Size(96,111)
                        }
                    });

                    //These are the mediq queries to adjust the map settings.
                    enquire.register( UIkit.mq.s.max, {
                        match: function(){

                            if( UIkit.mq.fourk() ){
                                marker.setIcon({
                                    url: '/assets/img/icons/map-marker-4k.png',
                                    Size: new google.maps.Size(354,403),
                                    scaledSize: new google.maps.Size(354/4,403/4)
                                });
                            }
                            else if( UIkit.mq.hd() ){
                                marker.setIcon({
                                    url: '/assets/img/icons/map-marker-retina.png',
                                    Size: new google.maps.Size(203,220),
                                    scaledSize: new google.maps.Size(203/2,220/2)
                                });
                            }
                            else {
                                marker.setIcon({
                                    url: '/assets/img/icons/map-marker-mobile.png',
                                    Size: new google.maps.Size(50,53)
                                });
                            }

                            setTimeout(function(){ map.setCenter(pos) }, 750 );
                        },
                        setup: function(){
                            map.setZoom( 16 );
                        },
                        deferSetup: true
                    });

                    enquire.register( UIkit.mq.m.min, {
                        match: function(){

                            if( UIkit.mq.fourk() ){
                                marker.setIcon({
                                    url: '/assets/img/icons/map-marker-4k.png',
                                    Size: new google.maps.Size(354,403),
                                    scaledSize: new google.maps.Size(354/4,403/4)
                                });
                            }
                            else if( UIkit.mq.hd() ){
                                marker.setIcon({
                                    url: '/assets/img/icons/map-marker-retina.png',
                                    Size: new google.maps.Size(203,220),
                                    scaledSize: new google.maps.Size(203/2,220/2)
                                });
                            }
                            else {
                                marker.setIcon({
                                    url: '/assets/img/icons/map-marker-sd.png',
                                    Size: new google.maps.Size(96,111)
                                });
                            }

                            setTimeout(function(){ map.setCenter(pos) }, 750 );
                        }
                    });

                });

            },

            script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = 'https://maps.googleapis.com/maps/api/js?callback=map_loaded&sensor=false';
            document.body.appendChild(script);
        }
    }
});

Media Query Helper

UIkit.on('beforeready.uk.dom', function(){

    UIkit.mq = {
        xs : {
            min: '(min-width: 0px)',
            max: '(max-width: 479px)'
        },
        s : {
            min: '(min-width: 480px)',
            max: '(max-width: 767px)'
        },
        m : {
            min: '(min-width: 768px)',
            max: '(max-width: 959px)'
        },
        l : {
            min: '(min-width: 960px)',
            max: '(max-width: 1219px)'
        },
        xl : {
            min: '(min-width: 1220px)',
            max: '(max-width: 9999999px)'
        },
        retina: function(){
            return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 2)) && /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
        },
        hd: function(){
            return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3));
        },
        fourk: function(){
             return ((screen.height < screen.width) ? (screen.width > 3839 ) : (screen.height > 3839 ) );
        }
    }
});