Skip to content

Instantly share code, notes, and snippets.

@enzienza

enzienza/custom-google-map.markdown

Created November 27, 2018 19:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save enzienza/f9b89ebc6c47c9f669d9a2d33c275234 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save enzienza/f9b89ebc6c47c9f669d9a2d33c275234 to your computer and use it in GitHub Desktop.
Download ZIP
Custom Google Map
Raw
custom-google-map.markdown
Raw
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>
Raw
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);
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment