enzienza/custom-google-map.markdown

## custom-google-map.markdown

      
    Raw
  

              custom-google-map.markdown
            
          
    Custom Google Map

A custom google map to show company location on your website. It can be easily customised to perfectly fit your website style!
Article and download on Cody: http://codyhouse.co/gem/custom-google-map/
A Pen by CodyHouse on CodePen.
License.

  
## index.html
<body>
<header>
	<h1>Custom Google Map</h1>
</header>

<section id="cd-google-map">
	<div id="google-container"></div>
	<div id="cd-zoom-in"></div>
	<div id="cd-zoom-out"></div>
	<address>86-90 Paul Street, London, EC2A 4NE</address>
</section>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</body>

## script.js
jQuery(document).ready(function($){
	//set your google maps parameters
	var $latitude = 51.5255069,
		$longitude = -0.0836207,
		$map_zoom = 14;

	//google map custom marker icon - .png fallback for IE11
	var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
	var $marker_url = ( is_internetExplorer11 ) ? 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-location.png' : 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-location_1.svg';

	//define the basic color of your map, plus a value for saturation and brightness
	var	$main_color = '#2d313f',
		$saturation= -20,
		$brightness= 5;

	//we define here the style of the map
	var style= [
		{
			//set saturation for the labels on the map
			elementType: "labels",
			stylers: [
				{saturation: $saturation}
			]
		},
	    {	//poi stands for point of interest - don't show these lables on the map
			featureType: "poi",
			elementType: "labels",
			stylers: [
				{visibility: "off"}
			]
		},
		{
			//don't show highways lables on the map
	        featureType: 'road.highway',
	        elementType: 'labels',
	        stylers: [
	            {visibility: "off"}
	        ]
	    },
		{
			//don't show local road lables on the map
			featureType: "road.local",
			elementType: "labels.icon",
			stylers: [
				{visibility: "off"}
			]
		},
		{
			//don't show arterial road lables on the map
			featureType: "road.arterial",
			elementType: "labels.icon",
			stylers: [
				{visibility: "off"}
			]
		},
		{
			//don't show road lables on the map
			featureType: "road",
			elementType: "geometry.stroke",
			stylers: [
				{visibility: "off"}
			]
		},
		//style different elements on the map
		{
			featureType: "transit",
			elementType: "geometry.fill",
			stylers: [
				{ hue: $main_color },
				{ visibility: "on" },
				{ lightness: $brightness },
				{ saturation: $saturation }
			]
		},
		{
			featureType: "poi",
			elementType: "geometry.fill",
			stylers: [
				{ hue: $main_color },
				{ visibility: "on" },
				{ lightness: $brightness },
				{ saturation: $saturation }
			]
		},
		{
			featureType: "poi.government",
			elementType: "geometry.fill",
			stylers: [
				{ hue: $main_color },
				{ visibility: "on" },
				{ lightness: $brightness },
				{ saturation: $saturation }
			]
		},
		{
			featureType: "poi.sport_complex",
			elementType: "geometry.fill",
			stylers: [
				{ hue: $main_color },
				{ visibility: "on" },
				{ lightness: $brightness },
				{ saturation: $saturation }
			]
		},
		{
			featureType: "poi.attraction",
			elementType: "geometry.fill",
			stylers: [
				{ hue: $main_color },
				{ visibility: "on" },
				{ lightness: $brightness },
				{ saturation: $saturation }
			]
		},
		{
			featureType: "poi.business",
			elementType: "geometry.fill",
			stylers: [
				{ hue: $main_color },
				{ visibility: "on" },
				{ lightness: $brightness },
				{ saturation: $saturation }
			]
		},
		{
			featureType: "transit",
			elementType: "geometry.fill",
			stylers: [
				{ hue: $main_color },
				{ visibility: "on" },
				{ lightness: $brightness },
				{ saturation: $saturation }
			]
		},
		{
			featureType: "transit.station",
			elementType: "geometry.fill",
			stylers: [
				{ hue: $main_color },
				{ visibility: "on" },
				{ lightness: $brightness },
				{ saturation: $saturation }
			]
		},
		{
			featureType: "landscape",
			stylers: [
				{ hue: $main_color },
				{ visibility: "on" },
				{ lightness: $brightness },
				{ saturation: $saturation }
			]

		},
		{
			featureType: "road",
			elementType: "geometry.fill",
			stylers: [
				{ hue: $main_color },
				{ visibility: "on" },
				{ lightness: $brightness },
				{ saturation: $saturation }
			]
		},
		{
			featureType: "road.highway",
			elementType: "geometry.fill",
			stylers: [
				{ hue: $main_color },
				{ visibility: "on" },
				{ lightness: $brightness },
				{ saturation: $saturation }
			]
		},
		{
			featureType: "water",
			elementType: "geometry",
			stylers: [
				{ hue: $main_color },
				{ visibility: "on" },
				{ lightness: $brightness },
				{ saturation: $saturation }
			]
		}
	];

	//set google map options
	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,
    }
    //inizialize the map
	var map = new google.maps.Map(document.getElementById('google-container'), map_options);
	//add a custom marker to the map
	var marker = new google.maps.Marker({
	  	position: new google.maps.LatLng($latitude, $longitude),
	    map: map,
	    visible: true,
	 	icon: $marker_url,
	});

	//add custom buttons for the zoom-in/zoom-out on the map
	function CustomZoomControl(controlDiv, map) {
		//grap the zoom elements from the DOM and insert them in the map
	  	var controlUIzoomIn= document.getElementById('cd-zoom-in'),
	  		controlUIzoomOut= document.getElementById('cd-zoom-out');
	  	controlDiv.appendChild(controlUIzoomIn);
	  	controlDiv.appendChild(controlUIzoomOut);

		// Setup the click event listeners and zoom-in or out according to the clicked element
		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);

  	//insert the zoom div on the top left of the map
  	map.controls[google.maps.ControlPosition.LEFT_TOP].push(zoomControlDiv);
});


## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

## style.scss
@import "bourbon";

// variables - colors

$main-text: #2d313f; // main text
$link: #d36868; // anchor tags
$background: #e7eaf0; // body background color

$color-1: #2d313f; // blue
$color-2: #d36868; // red
$color-3: #ffffff; // white

// variables - fonts

$primary-font: 'Lora', serif;

// rem fallback - credits: http://zerosixthree.se/

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

// layout - breakpoints

$S:     320px;
$M:     768px;
$L:     1170px;

// layout - media queries

@mixin MQ($canvas) {
  @if $canvas == S {
   @media only screen and (min-width: $S) { @content; }
  }
  @else if $canvas == M {
   @media only screen and (min-width: $M) { @content; }
  }
  @else if $canvas == L {
   @media only screen and (min-width: $L) { @content; }
  }
}

/* --------------------------------

Primary style

-------------------------------- */

html * {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
	@include box-sizing(border-box);
}

body {
	font: {
		size: 100%;
		family: $primary-font; // variables inside partials > _variables.scss
	}
	color: $main-text;
	background-color: $background;
}

/* --------------------------------

Main components

-------------------------------- */

header {
	height: 200px;
	line-height: 200px;
	text-align: center;
	background: $color-1;

	h1 {
		color: $color-3;
		@include font-size(20px);
	}

	@include MQ(M) {
		height: 300px;
		line-height: 300px;
	}
}

#google-container {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: $background;

    @include MQ(M) {
    	height: 300px;
    }

    @include MQ(L) {
    	height: 600px;
    }
}

#cd-google-map {
	position: relative;

	address {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		padding: 1em 1em;
		background-color: rgba($color-2, .9);
		color: $color-3;
		@include font-size(13px);

		@include MQ(M) {
			@include font-size(15px);
			text-align: center;
		}
	}
}

#cd-zoom-in, #cd-zoom-out {
	height: 32px;
	width: 32px;
	cursor: pointer;
	margin-left: 10px;
	background-color: rgba($color-2, .9);
	background-repeat: no-repeat;
	background-size: 32px 64px;
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-controller.svg');

	.no-touch &:hover {
		background-color: rgba($color-2, 1);
	}

	@include MQ(M) {
		margin-left: 50px;
	}
}

#cd-zoom-in {
	background-position: 50% 0;
	margin-top: 10px;
	margin-bottom: 1px;

	@include MQ(M) {
		margin-top: 50px;
	}
}

#cd-zoom-out {
	background-position: 50% -32px;
}
	<body>
	<header>
	<h1>Custom Google Map</h1>
	</header>

	<section id="cd-google-map">
	<div id="google-container"></div>
	<div id="cd-zoom-in"></div>
	<div id="cd-zoom-out"></div>
	<address>86-90 Paul Street, London, EC2A 4NE</address>
	</section>
	<script src="https://maps.googleapis.com/maps/api/js"></script>
	</body>
	jQuery(document).ready(function($){
	//set your google maps parameters
	var $latitude = 51.5255069,
	$longitude = -0.0836207,
	$map_zoom = 14;

	//google map custom marker icon - .png fallback for IE11
	var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
	var $marker_url = ( is_internetExplorer11 ) ? 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-location.png' : 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-location_1.svg';

	//define the basic color of your map, plus a value for saturation and brightness
	var $main_color = '#2d313f',
	$saturation= -20,
	$brightness= 5;

	//we define here the style of the map
	var style= [
	{
	//set saturation for the labels on the map
	elementType: "labels",
	stylers: [
	{saturation: $saturation}
	]
	},
	{ //poi stands for point of interest - don't show these lables on the map
	featureType: "poi",
	elementType: "labels",
	stylers: [
	{visibility: "off"}
	]
	},
	{
	//don't show highways lables on the map
	featureType: 'road.highway',
	elementType: 'labels',
	stylers: [
	{visibility: "off"}
	]
	},
	{
	//don't show local road lables on the map
	featureType: "road.local",
	elementType: "labels.icon",
	stylers: [
	{visibility: "off"}
	]
	},
	{
	//don't show arterial road lables on the map
	featureType: "road.arterial",
	elementType: "labels.icon",
	stylers: [
	{visibility: "off"}
	]
	},
	{
	//don't show road lables on the map
	featureType: "road",
	elementType: "geometry.stroke",
	stylers: [
	{visibility: "off"}
	]
	},
	//style different elements on the map
	{
	featureType: "transit",
	elementType: "geometry.fill",
	stylers: [
	{ hue: $main_color },
	{ visibility: "on" },
	{ lightness: $brightness },
	{ saturation: $saturation }
	]
	},
	{
	featureType: "poi",
	elementType: "geometry.fill",
	stylers: [
	{ hue: $main_color },
	{ visibility: "on" },
	{ lightness: $brightness },
	{ saturation: $saturation }
	]
	},
	{
	featureType: "poi.government",
	elementType: "geometry.fill",
	stylers: [
	{ hue: $main_color },
	{ visibility: "on" },
	{ lightness: $brightness },
	{ saturation: $saturation }
	]
	},
	{
	featureType: "poi.sport_complex",
	elementType: "geometry.fill",
	stylers: [
	{ hue: $main_color },
	{ visibility: "on" },
	{ lightness: $brightness },
	{ saturation: $saturation }
	]
	},
	{
	featureType: "poi.attraction",
	elementType: "geometry.fill",
	stylers: [
	{ hue: $main_color },
	{ visibility: "on" },
	{ lightness: $brightness },
	{ saturation: $saturation }
	]
	},
	{
	featureType: "poi.business",
	elementType: "geometry.fill",
	stylers: [
	{ hue: $main_color },
	{ visibility: "on" },
	{ lightness: $brightness },
	{ saturation: $saturation }
	]
	},
	{
	featureType: "transit",
	elementType: "geometry.fill",
	stylers: [
	{ hue: $main_color },
	{ visibility: "on" },
	{ lightness: $brightness },
	{ saturation: $saturation }
	]
	},
	{
	featureType: "transit.station",
	elementType: "geometry.fill",
	stylers: [
	{ hue: $main_color },
	{ visibility: "on" },
	{ lightness: $brightness },
	{ saturation: $saturation }
	]
	},
	{
	featureType: "landscape",
	stylers: [
	{ hue: $main_color },
	{ visibility: "on" },
	{ lightness: $brightness },
	{ saturation: $saturation }
	]

	},
	{
	featureType: "road",
	elementType: "geometry.fill",
	stylers: [
	{ hue: $main_color },
	{ visibility: "on" },
	{ lightness: $brightness },
	{ saturation: $saturation }
	]
	},
	{
	featureType: "road.highway",
	elementType: "geometry.fill",
	stylers: [
	{ hue: $main_color },
	{ visibility: "on" },
	{ lightness: $brightness },
	{ saturation: $saturation }
	]
	},
	{
	featureType: "water",
	elementType: "geometry",
	stylers: [
	{ hue: $main_color },
	{ visibility: "on" },
	{ lightness: $brightness },
	{ saturation: $saturation }
	]
	}
	];

	//set google map options
	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,
	}
	//inizialize the map
	var map = new google.maps.Map(document.getElementById('google-container'), map_options);
	//add a custom marker to the map
	var marker = new google.maps.Marker({
	position: new google.maps.LatLng($latitude, $longitude),
	map: map,
	visible: true,
	icon: $marker_url,
	});

	//add custom buttons for the zoom-in/zoom-out on the map
	function CustomZoomControl(controlDiv, map) {
	//grap the zoom elements from the DOM and insert them in the map
	var controlUIzoomIn= document.getElementById('cd-zoom-in'),
	controlUIzoomOut= document.getElementById('cd-zoom-out');
	controlDiv.appendChild(controlUIzoomIn);
	controlDiv.appendChild(controlUIzoomOut);

	// Setup the click event listeners and zoom-in or out according to the clicked element
	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);

	//insert the zoom div on the top left of the map
	map.controls[google.maps.ControlPosition.LEFT_TOP].push(zoomControlDiv);
	});
	@import "bourbon";

	// variables - colors

	$main-text: #2d313f; // main text
	$link: #d36868; // anchor tags
	$background: #e7eaf0; // body background color

	$color-1: #2d313f; // blue
	$color-2: #d36868; // red
	$color-3: #ffffff; // white

	// variables - fonts

	$primary-font: 'Lora', serif;

	// rem fallback - credits: http://zerosixthree.se/

	@function calculateRem($size) {
	$remSize: $size / 16px;
	@return $remSize * 1rem;
	}

	@mixin font-size($size) {
	font-size: $size;
	font-size: calculateRem($size);
	}

	// layout - breakpoints

	$S: 320px;
	$M: 768px;
	$L: 1170px;

	// layout - media queries

	@mixin MQ($canvas) {
	@if $canvas == S {
	@media only screen and (min-width: $S) { @content; }
	}
	@else if $canvas == M {
	@media only screen and (min-width: $M) { @content; }
	}
	@else if $canvas == L {
	@media only screen and (min-width: $L) { @content; }
	}
	}

	/* --------------------------------

	Primary style

	-------------------------------- */

	html * {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

	, :after, *:before {
	@include box-sizing(border-box);
	}

	body {
	font: {
	size: 100%;
	family: $primary-font; // variables inside partials > _variables.scss
	}
	color: $main-text;
	background-color: $background;
	}

	/* --------------------------------

	Main components

	-------------------------------- */

	header {
	height: 200px;
	line-height: 200px;
	text-align: center;
	background: $color-1;

	h1 {
	color: $color-3;
	@include font-size(20px);
	}

	@include MQ(M) {
	height: 300px;
	line-height: 300px;
	}
	}

	#google-container {
	position: relative;
	width: 100%;
	height: 200px;
	background-color: $background;

	@include MQ(M) {
	height: 300px;
	}

	@include MQ(L) {
	height: 600px;
	}
	}

	#cd-google-map {
	position: relative;

	address {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	padding: 1em 1em;
	background-color: rgba($color-2, .9);
	color: $color-3;
	@include font-size(13px);

	@include MQ(M) {
	@include font-size(15px);
	text-align: center;
	}
	}
	}

	#cd-zoom-in, #cd-zoom-out {
	height: 32px;
	width: 32px;
	cursor: pointer;
	margin-left: 10px;
	background-color: rgba($color-2, .9);
	background-repeat: no-repeat;
	background-size: 32px 64px;
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-controller.svg');

	.no-touch &:hover {
	background-color: rgba($color-2, 1);
	}

	@include MQ(M) {
	margin-left: 50px;
	}
	}

	#cd-zoom-in {
	background-position: 50% 0;
	margin-top: 10px;
	margin-bottom: 1px;

	@include MQ(M) {
	margin-top: 50px;
	}
	}

	#cd-zoom-out {
	background-position: 50% -32px;
	}