adamkudrna/map.js

## map.js
/**
 * Initialize and render customized Google map.
 */

'use strict';


var mapRendered = false;

function Map() {}

Map.render = function(id, lat, long) {
    var _map, _style, _mapOptions, _markerOptions, _marker;

    // Visual style
    _style = [
        {
            'elementType': 'geometry.fill',
            'stylers': [
                {'color': '#332d38'}
            ]
        }, {
            'featureType': 'landscape',
            'stylers': [
                {'color': '#ec0361'}
            ]
        }, {
            'elementType': 'labels.text.fill',
            'stylers': [
                {'color': '#332d38'}
            ]
        }, {
            'elementType': 'labels.text.stroke',
            'stylers': [
                {'color': '#ffffff'},
                {'weight': 2.5}
            ]
        }, {
            'elementType': 'labels.icon',
            'stylers': [
                {'visibility': 'off'}
            ]
        }, {
            'featureType': 'road',
            'elementType': 'geometry',
            'stylers': [
                {'color': '#ffffff'},
                {'visibility': 'simplified'}
            ]
        }, {
            'featureType': 'landscape.man_made',
            'elementType': 'geometry',
            'stylers': [
                {'visibility': 'off'}
            ]
        }, {
            'featureType': 'poi',
            'elementType': 'labels',
            'stylers': [
                {'visibility': 'off'}
            ]
        }
    ];

    // Set rendering options
    _mapOptions = {
        zoom: 16,
        center: new google.maps.LatLng(lat, long),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: _style,
        backgroundColor: '#ec0361',
        panControl: false,
        scrollwheel: false,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.RIGHT_TOP
        },
        streetViewControlOptions: {
            position: google.maps.ControlPosition.RIGHT_TOP
        }
    };

    // Render map
    _map = new google.maps.Map(document.getElementById(id), _mapOptions);

    // Add custom marker
    _markerOptions = {
        position: new google.maps.LatLng(lat, long),
        icon: new google.maps.MarkerImage('images/map-marker@2x.png', null, null, null, new google.maps.Size(40, 40))
    };
    _marker = new google.maps.Marker(_markerOptions);
    _marker.setMap(_map);

    mapRendered = true;
};

Map.init = function() {
    var _places;

    // Places
    _places = [
        {
            'lat': 50.0905861,
            'long': 14.4016001
        },
    ];

    // Render all places
    if (document.getElementById('map')) {
        this.render('map', _places[0].lat, _places[0].long);
    }
};

Map.update = function() {
    var _visibilityGuard, _mapIsVisible;

    // Check if maps should be initialized
    _visibilityGuard = document.getElementById('map_guard');
    _mapIsVisible = window.getComputedStyle(_visibilityGuard, null).getPropertyValue('display') === 'block';

    if (_mapIsVisible && !mapRendered) {
        this.init();
    }
};

## responsive-google-map.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="dns-prefetch" href="//maps.googleapis.com" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Google Map</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body onload="Map.init()" onresize="Map.update()">
        <div id="map"></div>
        <div id="map_guard" class="map-visibility-guard"></div>

        <script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script src="map.js"></script>
    </body>
</html>

## style.scss
.map {
    display: none;

    @media screen and (min-width: $screen-medium) {
        width: 100%;
        height: 400px;
        display: block;
        margin-top: $line-height-computed;
        margin-bottom: $line-height-computed;
    }

    @media screen and (min-width: $screen-wide) {
        height: 500px;
        margin-top: 4.3em; // align with heading on the left
    }

    // For JS to know that maps should be loaded
    &-visibility-guard {
        display: none;

        @media screen and (min-width: $screen-medium) {
            display: block;
        }
    }
}
	/**
	* Initialize and render customized Google map.
	*/

	'use strict';


	var mapRendered = false;

	function Map() {}

	Map.render = function(id, lat, long) {
	var _map, _style, _mapOptions, _markerOptions, _marker;

	// Visual style
	_style = [
	{
	'elementType': 'geometry.fill',
	'stylers': [
	{'color': '#332d38'}
	]
	}, {
	'featureType': 'landscape',
	'stylers': [
	{'color': '#ec0361'}
	]
	}, {
	'elementType': 'labels.text.fill',
	'stylers': [
	{'color': '#332d38'}
	]
	}, {
	'elementType': 'labels.text.stroke',
	'stylers': [
	{'color': '#ffffff'},
	{'weight': 2.5}
	]
	}, {
	'elementType': 'labels.icon',
	'stylers': [
	{'visibility': 'off'}
	]
	}, {
	'featureType': 'road',
	'elementType': 'geometry',
	'stylers': [
	{'color': '#ffffff'},
	{'visibility': 'simplified'}
	]
	}, {
	'featureType': 'landscape.man_made',
	'elementType': 'geometry',
	'stylers': [
	{'visibility': 'off'}
	]
	}, {
	'featureType': 'poi',
	'elementType': 'labels',
	'stylers': [
	{'visibility': 'off'}
	]
	}
	];

	// Set rendering options
	_mapOptions = {
	zoom: 16,
	center: new google.maps.LatLng(lat, long),
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	styles: _style,
	backgroundColor: '#ec0361',
	panControl: false,
	scrollwheel: false,
	zoomControlOptions: {
	style: google.maps.ZoomControlStyle.SMALL,
	position: google.maps.ControlPosition.RIGHT_TOP
	},
	streetViewControlOptions: {
	position: google.maps.ControlPosition.RIGHT_TOP
	}
	};

	// Render map
	_map = new google.maps.Map(document.getElementById(id), _mapOptions);

	// Add custom marker
	_markerOptions = {
	position: new google.maps.LatLng(lat, long),
	icon: new google.maps.MarkerImage('images/map-marker@2x.png', null, null, null, new google.maps.Size(40, 40))
	};
	_marker = new google.maps.Marker(_markerOptions);
	_marker.setMap(_map);

	mapRendered = true;
	};

	Map.init = function() {
	var _places;

	// Places
	_places = [
	{
	'lat': 50.0905861,
	'long': 14.4016001
	},
	];

	// Render all places
	if (document.getElementById('map')) {
	this.render('map', _places[0].lat, _places[0].long);
	}
	};

	Map.update = function() {
	var _visibilityGuard, _mapIsVisible;

	// Check if maps should be initialized
	_visibilityGuard = document.getElementById('map_guard');
	_mapIsVisible = window.getComputedStyle(_visibilityGuard, null).getPropertyValue('display') === 'block';

	if (_mapIsVisible && !mapRendered) {
	this.init();
	}
	};
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />
	<link rel="dns-prefetch" href="//maps.googleapis.com" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Google Map</title>
	<link rel="stylesheet" href="style.css" />
	</head>
	<body onload="Map.init()" onresize="Map.update()">
	<div id="map"></div>
	<div id="map_guard" class="map-visibility-guard"></div>

	<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script src="map.js"></script>
	</body>
	</html>
	.map {
	display: none;

	@media screen and (min-width: $screen-medium) {
	width: 100%;
	height: 400px;
	display: block;
	margin-top: $line-height-computed;
	margin-bottom: $line-height-computed;
	}

	@media screen and (min-width: $screen-wide) {
	height: 500px;
	margin-top: 4.3em; // align with heading on the left
	}

	// For JS to know that maps should be loaded
	&-visibility-guard {
	display: none;

	@media screen and (min-width: $screen-medium) {
	display: block;
	}
	}
	}