Advertisement
przemosk

Untitled

Jan 29th, 2015
145
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.11 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Simple styled maps</title>
  5.     <style>
  6.         html, body, #map-canvas {
  7.             height: 100%;
  8.             margin: 0px;
  9.             padding: 0px
  10.         }
  11.     </style>
  12.     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
  13.     <script>
  14.         var map;
  15.         var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);
  16.  
  17.         var MY_MAPTYPE_ID = 'custom_style';
  18.  
  19.         function initialize() {
  20.  
  21.             var featureOpts = [
  22.                 {
  23.                     stylers: [
  24.                         { hue: '#890000' },
  25.                         { visibility: 'simplified' },
  26.                         { gamma: 0.8 },
  27.                         { weight: 0.8 }
  28.                     ]
  29.                 },
  30.  
  31.  
  32.                 {
  33.                     elementType: 'labels',
  34.                     stylers: [
  35.                         {
  36.                             visibility: 'on'
  37.                         }
  38.                     ]
  39.                 },
  40.  
  41.                 {
  42.                     elementType: 'labels.text',
  43.                     stylers: [
  44.                         {
  45.                             visibility: 'on',
  46.                             color: "#000000"
  47.                         }
  48.                     ]
  49.                 },
  50.  
  51.  
  52.                 {
  53.                     featureType: 'water',
  54.                     stylers: [
  55.                         {
  56.                             color: '#a1d6fe',
  57.                             gamma: 0.8, // gamma
  58.                             hue: '#FF0000', // odcień
  59.                             lightness: 80, //jasność, (-100,100)
  60.                             saturation: 30, // saturacja (-100, 100)
  61.                             weight: 10
  62.                         }
  63.                     ]
  64.                 },
  65.  
  66.                 <!-- TUTAJ SIE ZACZYNA SEKCJA DO KOPIOWANIA -->
  67.                 {
  68.                     featureType: 'road', //tutaj wrzucasz typ
  69.                     stylers: [
  70.                         {
  71.                             color: '#ffffff', // kolor
  72.                             gamma: 0.8, // gamma
  73.                             hue: '#FF0000', // odcień
  74.                             lightness: 80, //jasność, (-100,100)
  75.                             saturation: 30, // saturacja (-100, 100)
  76.                             weight: 10 //pixels
  77.                         }
  78.                     ],
  79.                     elementType: 'labels.text',         //tutaj zaczyna się konfiguracji nazwy ulic
  80.                     stylers: [
  81.                         {
  82.                             visibility: 'on',
  83.                             color: "#000000"
  84.                         }
  85.                     ]
  86.                 },
  87.  
  88.                 <!-- TUTAJ SIE KOŃCZY SEKCJA DO KOPIOWANIA -->
  89.                 {
  90.                     featureType: 'administrative.land_parcel', //tutaj wrzucasz typ
  91.                     stylers: [
  92.                         {
  93.                             color: '#4a4a4a', // kolor
  94.                             gamma: 0.8, // gamma
  95.                             hue: '#FF0000', // odcień
  96.                             lightness: 80, //jasność, (-100,100)
  97.                             saturation: 30, // saturacja (-100, 100)
  98.                             weight: 10 //pixels
  99.                         }
  100.                     ]
  101.                 },
  102.  
  103.                 {
  104.                     featureType: 'administrative.locality', //tutaj wrzucasz typ
  105.                     stylers: [
  106.                         {
  107.                             color: '#1484d8', // kolor
  108.                             gamma: 0.8, // gamma
  109.                             hue: '#FF0000', // odcień
  110.                             lightness: 80, //jasność, (-100,100)
  111.                             saturation: 30, // saturacja (-100, 100)
  112.                             weight: 3 //pixels
  113.                         }
  114.                     ]
  115.                 },
  116.  
  117.                 {
  118.                     featureType: 'landscape', //tutaj wrzucasz typ
  119.                     stylers: [
  120.                         {
  121.                             color: '#f0ede5', // kolor
  122.                             gamma: 0.8, // gamma
  123.                             hue: '#FF0000', // odcień
  124.                             lightness: 80, //jasność, (-100,100)
  125.                             saturation: 30, // saturacja (-100, 100)
  126.                             weight: 3 //pixels
  127.                         }
  128.                     ]
  129.                 },
  130.  
  131.                 {
  132.                     featureType: 'landscape.man_made', //tutaj wrzucasz typ
  133.                     stylers: [
  134.                         {
  135.                             color: '#dfdbd4', // kolor
  136.                             gamma: 0.8, // gamma
  137.                             hue: '#FF0000', // odcień
  138.                             lightness: 80, //jasność, (-100,100)
  139.                             saturation: 30, // saturacja (-100, 100)
  140.                             weight: 3 //pixels
  141.                         }
  142.                     ]
  143.                 },
  144.  
  145.                 {
  146.                     featureType: 'poi', //tutaj wrzucasz typ
  147.                     stylers: [
  148.                         {
  149.                             color: '#d2e4c8', // kolor
  150.                             gamma: 0.1, // gamma
  151.                             hue: '#FF0000', // odcień
  152.                             lightness: 80, //jasność, (-100,100)
  153.                             saturation: 30, // saturacja (-100, 100)
  154.                             weight: 3 //pixels
  155.                         }
  156.                     ]
  157.                 },
  158.                 <!-- TUTAJ SIE KOŃCZY SEKCJA DO KOPIOWANIA -->
  159.  
  160.                 {
  161.                     featureType: 'poi.attraction', //tutaj wrzucasz typ
  162.                     stylers: [
  163.                         {
  164.                             color: '#d2e4c8', // kolor
  165.                             gamma: 0.1, // gamma
  166.                             hue: '#FF0000', // odcień
  167.                             lightness: 80, //jasność, (-100,100)
  168.                             saturation: 30, // saturacja (-100, 100)
  169.                             weight: 3 //pixels
  170.                         }
  171.                     ]
  172.                 }
  173.                 <!-- TUTAJ SIE KOŃCZY SEKCJA DO KOPIOWANIA -->
  174.             ]
  175.             var mapOptions = {
  176.                 zoom: 12,
  177.                 center: brooklyn,
  178.                 mapTypeControlOptions: {
  179.                     mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
  180.                 },
  181.                 mapTypeId: MY_MAPTYPE_ID
  182.             };
  183.  
  184.             map = new google.maps.Map(document.getElementById('map-canvas'),
  185.                     mapOptions);
  186.  
  187.             var styledMapOptions = {
  188.                 name: 'Custom Style'
  189.             };
  190.  
  191.             var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
  192.  
  193.             map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
  194.         }
  195.  
  196.         google.maps.event.addDomListener(window, 'load', initialize);
  197.  
  198.     </script>
  199. </head>
  200. <body>
  201. <div id="map-canvas"></div>
  202. </body>
  203. </html></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement