Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Simple styled maps</title>
- <style>
- html, body, #map-canvas {
- height: 100%;
- margin: 0px;
- padding: 0px
- }
- </style>
- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
- <script>
- var map;
- var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);
- var MY_MAPTYPE_ID = 'custom_style';
- function initialize() {
- var featureOpts = [
- {
- stylers: [
- { hue: '#f2842b' },
- { visibility: 'simplified' },
- { gamma: 0.8 },
- { weight: 0.8 }
- ]
- },
- {
- elementType: 'labels',
- stylers: [
- {
- visibility: 'on'
- }
- ]
- },
- {
- elementType: 'labels.text',
- stylers: [
- {
- visibility: 'on',
- color: "#000000"
- }
- ]
- },
- {
- featureType: 'water',
- stylers: [
- {
- color: '#5eb9ff',
- gamma: 0.3, // gamma
- hue: '#FF0000', // odcień
- lightness: 65, //jasność, (-100,100)
- saturation: 30, // saturacja (-100, 100)
- weight: 10
- }
- ]
- },
- {
- featureType: 'road', //tutaj wrzucasz typ
- stylers: [
- {
- color: '#ffffff', // kolor
- gamma: 0.8, // gamma
- hue: '#FF0000', // odcień
- lightness: 80, //jasność, (-100,100)
- saturation: 30, // saturacja (-100, 100)
- weight: 10 //pixels
- }
- ],
- elementType: 'labels.text', //tutaj zaczyna się konfiguracji nazwy ulic
- stylers: [
- {
- visibility: 'on',
- color: "#000000"
- }
- ]
- },
- {
- featureType: 'administrative.land_parcel', //tutaj wrzucasz typ
- stylers: [
- {
- color: '#4a4a4a', // kolor
- gamma: 0.8, // gamma
- hue: '#FF0000', // odcień
- lightness: 80, //jasność, (-100,100)
- saturation: 30, // saturacja (-100, 100)
- weight: 10 //pixels
- }
- ]
- },
- {
- featureType: 'administrative.locality', //tutaj wrzucasz typ
- stylers: [
- {
- color: '#1484d8', // kolor
- gamma: 0.8, // gamma
- hue: '#FF0000', // odcień
- lightness: 80, //jasność, (-100,100)
- saturation: 30, // saturacja (-100, 100)
- weight: 3 //pixels
- }
- ]
- },
- {
- featureType: 'landscape', //tutaj wrzucasz typ
- stylers: [
- {
- color: '#f0ede5', // kolor
- gamma: 0.8, // gamma
- hue: '#FF0000', // odcień
- lightness: 80, //jasność, (-100,100)
- saturation: 30, // saturacja (-100, 100)
- weight: 3 //pixels
- }
- ]
- },
- {
- featureType: 'landscape.man_made', //tutaj wrzucasz typ
- stylers: [
- {
- color: '#dfdbd4', // kolor
- gamma: 0.8, // gamma
- hue: '#FF0000', // odcień
- lightness: 80, //jasność, (-100,100)
- saturation: 30, // saturacja (-100, 100)
- weight: 3 //pixels
- }
- ]
- },
- {
- featureType: 'poi', //tutaj wrzucasz typ
- stylers: [
- {
- color: '#b3dd9b', // kolor
- gamma: 0.1, // gamma
- hue: '#FF0000', // odcień
- lightness: 80, //jasność, (-100,100)
- saturation: 30, // saturacja (-100, 100)
- weight: 3 //pixels
- }
- ]
- },
- {
- featureType: 'poi.attraction', //tutaj wrzucasz typ
- stylers: [
- {
- color: '#d2e4c8', // kolor
- gamma: 0.1, // gamma
- hue: '#FF0000', // odcień
- lightness: 80, //jasność, (-100,100)
- saturation: 30, // saturacja (-100, 100)
- weight: 3 //pixels
- }
- ]
- },
- {
- featureType: 'poi.park', //tutaj wrzucasz typ
- stylers: [
- {
- color: '#d2e4c8', // kolor
- gamma: 0.1, // gamma
- hue: '#FF0000', // odcień
- lightness: 80, //jasność, (-100,100)
- saturation: 30, // saturacja (-100, 100)
- weight: 3 //pixels
- }
- ]
- },
- {
- featureType: 'transit.line', //tutaj wrzucasz typ
- stylers: [
- {
- color: '#ffba7e', // kolor
- gamma: 0.1, // gamma
- hue: '#FF0000', // odcień
- lightness: 80, //jasność, (-100,100)
- saturation: 30, // saturacja (-100, 100)
- weight: 3 //pixels
- }
- ]
- }
- ]
- var mapOptions = {
- zoom: 12,
- center: brooklyn,
- mapTypeControlOptions: {
- mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
- },
- mapTypeId: MY_MAPTYPE_ID
- };
- map = new google.maps.Map(document.getElementById('map-canvas'),
- mapOptions);
- var styledMapOptions = {
- name: 'Custom Style'
- };
- var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
- map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
- }
- google.maps.event.addDomListener(window, 'load', initialize);
- </script>
- </head>
- <body>
- <div id="map-canvas"></div>
- </body>
- </html></html></html></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement