Custom Google Maps

Developer
Luke Watts
Size
5,076 Kb
Views
30,360
  1. Custom Google Maps Previews
  2. Custom Google Maps HTML Codes
  3. Custom Google Maps CSS Codes
  4. Custom Google Maps JS Codes

How do I make an custom google maps?

What is a custom google maps? How do you make a custom google maps? This script and codes were developed by Luke Watts on 14 August 2022, Sunday.

Custom Google Maps Previews
IQ Test

Custom Google Maps - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Google Maps</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header> <h1>Custom Google Maps</h1>
</header>
<div id="cd-google-map"> <!-- #google-container will contain the map--> <div id="google-container"></div> <!-- #cd-zoom-in and #zoom-out will be used to create our custom buttons for zooming-in/out--> <div id="cd-zoom-in"></div> <div id="cd-zoom-out"> </div> <address>86-90 Paul Street, London, EC2A 4NE</address>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyAl-EDTJ5_uU3zBIX7-wNTu-qSZr1DO5Dw'></script> <script src="js/index.js"></script>
</body>
</html>

Custom Google Maps - Script Codes CSS Codes

.gm-style .gm-style-cc span,
.gm-style .gm-style-cc a,
.gm-style .gm-style-mtc div { font-size: 10px;
}
.gm-style { font-family: Roboto, Arial, sans-serif; font-size: 11px; font-weight: 400; text-decoration: none;
}
.gm-style img { max-width: none;
}
html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
*,
*:after,
*:before { box-sizing: border-box;
}
body { font-size: 100%; font-family: "Roboto", sans-serif; color: #2d313f; background-color: #e7eaf0;
}
/* -------------------------------- * Main components * -------------------------------- */
header { height: 200px; line-height: 200px; text-align: center; background: #2d313f;
}
header h1 { color: white; font-size: 20px; font-size: 1.25rem;
}
@media only screen and (min-width: 768px) { header { height: 300px; line-height: 300px; }
}
#google-container { position: relative; width: 100%; height: 200px; background-color: #e7eaf0;
}
@media only screen and (min-width: 768px) { #google-container { height: 300px; }
}
@media only screen and (min-width: 1170px) { #google-container { height: 600px; }
}
#cd-google-map { position: relative;
}
#cd-google-map address { position: absolute; width: 100%; bottom: 0; left: 0; padding: 1em 1em; background-color: rgba(211, 104, 104, 0.9); color: white; font-size: 13px; font-size: 0.8125rem;
}
@media only screen and (min-width: 768px) { #cd-google-map address { font-size: 15px; font-size: 0.9375rem; text-align: center; }
}
#cd-zoom-in, #cd-zoom-out { height: 32px; width: 32px; cursor: pointer; margin-left: 10px; background-color: rgba(211, 104, 104, 0.9); background-repeat: no-repeat; background-size: 32px 64px; background-image: url("//codyhouse.co/demo/custom-google-map/img/cd-icon-controller.svg");
}
.no-touch #cd-zoom-in:hover,
.no-touch #cd-zoom-out:hover { background-color: #d36868;
}
@media only screen and (min-width: 768px) { #cd-zoom-in, #cd-zoom-out { margin-left: 50px; }
}
#cd-zoom-in { background-position: 50% 0; margin-top: 10px; margin-bottom: 1px;
}
@media only screen and (min-width: 768px) { margin-top: 50px;
}
#cd-zoom-out { background-position: 50% -32px;
}

Custom Google Maps - Script Codes JS Codes

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 ) ? '//codyhouse.co/demo/custom-google-map/img/cd-icon-location.png' : '//codyhouse.co/demo/custom-google-map/img/cd-icon-location.svg';	//define the basic color of your map, plus a value for saturation and brightness	var	main_color = '#2d313f',	saturation_value= -20,	brightness_value= 5;	//we define here the style of the map	var style= [	{	//set saturation for the labels on the map	elementType: "labels",	stylers: [	{saturation: saturation_value}	]	}, {	//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_value },	{ saturation: saturation_value }	]	},	{	featureType: "poi",	elementType: "geometry.fill",	stylers: [	{ hue: main_color },	{ visibility: "on" },	{ lightness: brightness_value },	{ saturation: saturation_value }	]	},	{	featureType: "poi.government",	elementType: "geometry.fill",	stylers: [	{ hue: main_color },	{ visibility: "on" },	{ lightness: brightness_value },	{ saturation: saturation_value }	]	},	{	featureType: "poi.sport_complex",	elementType: "geometry.fill",	stylers: [	{ hue: main_color },	{ visibility: "on" },	{ lightness: brightness_value },	{ saturation: saturation_value }	]	},	{	featureType: "poi.attraction",	elementType: "geometry.fill",	stylers: [	{ hue: main_color },	{ visibility: "on" },	{ lightness: brightness_value },	{ saturation: saturation_value }	]	},	{	featureType: "poi.business",	elementType: "geometry.fill",	stylers: [	{ hue: main_color },	{ visibility: "on" },	{ lightness: brightness_value },	{ saturation: saturation_value }	]	},	{	featureType: "transit",	elementType: "geometry.fill",	stylers: [	{ hue: main_color },	{ visibility: "on" },	{ lightness: brightness_value },	{ saturation: saturation_value }	]	},	{	featureType: "transit.station",	elementType: "geometry.fill",	stylers: [	{ hue: main_color },	{ visibility: "on" },	{ lightness: brightness_value },	{ saturation: saturation_value }	]	},	{	featureType: "landscape",	stylers: [	{ hue: main_color },	{ visibility: "on" },	{ lightness: brightness_value },	{ saturation: saturation_value }	]	},	{	featureType: "road",	elementType: "geometry.fill",	stylers: [	{ hue: main_color },	{ visibility: "on" },	{ lightness: brightness_value },	{ saturation: saturation_value }	]	},	{	featureType: "road.highway",	elementType: "geometry.fill",	stylers: [	{ hue: main_color },	{ visibility: "on" },	{ lightness: brightness_value },	{ saturation: saturation_value }	]	},	{	featureType: "water",	elementType: "geometry",	stylers: [	{ hue: main_color },	{ visibility: "on" },	{ lightness: brightness_value },	{ saturation: saturation_value }	]	}	];	//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);
});
Custom Google Maps - Script Codes
Custom Google Maps - Script Codes
Home Page Home
Developer Luke Watts
Username lukewatts
Uploaded August 14, 2022
Rating 3
Size 5,076 Kb
Views 30,360
Do you need developer help for Custom Google Maps?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Luke Watts (lukewatts) Script Codes
Name
Turnable LED Dial
CSS Drop Shadows with Global Illumination
Automatic Quotes
Footer Concept 02
HUD Animation Test
Product Item Additional Info On Hover
Webkit Background Text Clip
Form Inputs
Media Module Pattern
Style System
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!