Experimentation - Gmaps Colors

Developer
Kévin Joffard
Size
2,757 Kb
Views
18,216
  1. Experimentation - Gmaps Colors Previews
  2. Experimentation - Gmaps Colors HTML Codes
  3. Experimentation - Gmaps Colors CSS Codes
  4. Experimentation - Gmaps Colors JS Codes

How do I make an experimentation - gmaps colors?

What is a experimentation - gmaps colors? How do you make a experimentation - gmaps colors? This script and codes were developed by Kévin Joffard on 11 October 2022, Tuesday.

Experimentation - Gmaps Colors Previews
IQ Test

Experimentation - Gmaps Colors - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Experimentation - Gmaps Colors</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en"><head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
window.onload = function () {	var styles = [	{	featureType: 'water',	elementType: 'all',	stylers: [	{ hue: '#00BCE2' },	{ saturation: 100 },	{ lightness: -42 },	{ visibility: 'on' }	]	},{	featureType: 'road',	elementType: 'all',	stylers: [	{ hue: '#FFC72C' },	{ saturation: 100 },	{ lightness: -8 },	{ visibility: 'on' }	]	},{	featureType: 'administrative',	elementType: 'labels',	stylers: [	{ hue: '#EFF0F2' },	{ saturation: 10 },	{ lightness: 88 },	{ visibility: 'on' }	]	},{	featureType: 'landscape',	elementType: 'all',	stylers: [	{ hue: '#071D49' },	{ saturation: 76 },	{ lightness: -82 },	{ visibility: 'on' }	]	},{	featureType: 'poi',	elementType: 'geometry',	stylers: [	{ hue: '#60C659' },	{ saturation: 10 },	{ lightness: -28 },	{ visibility: 'simplified' }	]	},{	featureType: 'poi',	elementType: 'geometry',	stylers: [	{ hue: '#60C659' },	{ saturation: 10 },	{ lightness: -28 },	{ visibility: 'simplified' }	]	},{	featureType: 'poi',	elementType: 'all',	stylers: [	{ hue: '#60C659' },	{ saturation: 10 },	{ lightness: -28 },	{ visibility: 'on' }	]	}	];
var options = {	mapTypeControlOptions: {	mapTypeIds: ['Styled']	},	center: new google.maps.LatLng(-7.245217594087794, 112.74455556869509),	zoom: 16,	disableDefaultUI: true,	mapTypeId: 'Styled'
};
var div = document.getElementById('surabaya');
var map = new google.maps.Map(div, options);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
}
</script>
<!-- nav script -->
<script src="../nav/js/nav.js" type="text/javascript"></script>
</head>
<body>
<!-- nav meta -->
<div class="demo-meta"> <h1 class="demo-title">Google Maps with Custom Styles</h1> <p class="demo-desc">Styling Google Maps</p>
</div>
<!-- demo content -->
<div class="demo-wrapper">	<div id="surabaya"></div>
</div>
</body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Experimentation - Gmaps Colors - Script Codes CSS Codes

html, body { height: 100%; margin: 0; padding: 0;
}

Experimentation - Gmaps Colors - Script Codes JS Codes

window.onload = function () {	var styles = [	{	featureType: 'water', // set the water color	elementType: 'geometry.fill', // apply the color only to the fill	stylers: [	{ color: '#adc9b8' }	]	},{	featureType: 'landscape.natural', // set the natural landscape	elementType: 'all',	stylers: [	{ hue: '#809f80' },	{ lightness: -35 }	]	}	,{	featureType: 'poi', // set the point of interest	elementType: 'geometry',	stylers: [	{ hue: '#f9e0b7' },	{ lightness: 30 }	]	},{	featureType: 'road', // set the road	elementType: 'geometry',	stylers: [	{ hue: '#d5c18c' },	{ lightness: 14 }	]	},{	featureType: 'road.local', // set the local road	elementType: 'all',	stylers: [	{ hue: '#ffd7a6' },	{ saturation: 100 },	{ lightness: -12 }	]	}
];
var options = {	mapTypeControlOptions: {	mapTypeIds: ['Styled']	},	center: new google.maps.LatLng(-7.245217594087794, 112.74455556869509),	zoom: 16,	disableDefaultUI: true,	mapTypeId: 'Styled'
};
var div = document.getElementById('surabaya');
var map = new google.maps.Map(div, options);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
}
Experimentation - Gmaps Colors - Script Codes
Experimentation - Gmaps Colors - Script Codes
Home Page Home
Developer Kévin Joffard
Username kejoff
Uploaded October 11, 2022
Rating 3
Size 2,757 Kb
Views 18,216
Do you need developer help for Experimentation - Gmaps Colors?

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!

Kévin Joffard (kejoff) Script Codes
Name
Footer Grid
Landing Page 3 columns oblique
Animation iFrame Google maps - Vanilla Javascript
Vertical Accordeon Menu
Aframe - Hello Metaverse Testing
Product Page
Footer new generation
Grid 2 columns test
Create amazing art & images 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!