Advertisement
Guest User

Untitled

a guest
Jan 29th, 2015
145
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.47 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.                         { visibility: 'on' }
  36.                     ]
  37.                 },
  38.  
  39.  
  40.                 {
  41.                     featureType: 'water',
  42.                     stylers: [
  43.                         {
  44.                             color: '#a1d6fe',
  45.                             gamma: 0.8, // gamma
  46.                             hue: '#FF0000', // odcień
  47.                             lightness: 80, //jasność, (-100,100)
  48.                             saturation: 30, // saturacja (-100, 100)
  49.                             weight: 10
  50.                         }
  51.                     ]
  52.                 },
  53.  
  54.                 <!-- TUTAJ SIE ZACZYNA SEKCJA DO KOPIOWANIA -->
  55.                 {
  56.                     featureType: 'road', //tutaj wrzucasz typ
  57.                     stylers: [
  58.                         {
  59.                             color: '#ffffff', // kolor
  60.                             gamma: 0.8, // gamma
  61.                             hue: '#FF0000', // odcień
  62.                             lightness: 80, //jasność, (-100,100)
  63.                             saturation: 30, // saturacja (-100, 100)
  64.                             weight: 10 //pixels
  65.                         }
  66.                     ]
  67.                 },
  68.  
  69.                 <!-- TUTAJ SIE KOŃCZY SEKCJA DO KOPIOWANIA -->
  70.                 {
  71.                     featureType: 'administrative.land_parcel', //tutaj wrzucasz typ
  72.                     stylers: [
  73.                         {
  74.                             color: '#4a4a4a', // kolor
  75.                             gamma: 0.8, // gamma
  76.                             hue: '#FF0000', // odcień
  77.                             lightness: 80, //jasność, (-100,100)
  78.                             saturation: 30, // saturacja (-100, 100)
  79.                             weight: 10 //pixels
  80.                         }
  81.                     ]
  82.                 },
  83.  
  84.                 {
  85.                     featureType: 'administrative.locality', //tutaj wrzucasz typ
  86.                     stylers: [
  87.                         {
  88.                             color: '#1484d8', // kolor
  89.                             gamma: 0.8, // gamma
  90.                             hue: '#FF0000', // odcień
  91.                             lightness: 80, //jasność, (-100,100)
  92.                             saturation: 30, // saturacja (-100, 100)
  93.                             weight: 3 //pixels
  94.                         }
  95.                     ]
  96.                 },
  97.  
  98.                 {
  99.                     featureType: 'landscape', //tutaj wrzucasz typ
  100.                     stylers: [
  101.                         {
  102.                             color: '#f0ede5', // kolor
  103.                             gamma: 0.8, // gamma
  104.                             hue: '#FF0000', // odcień
  105.                             lightness: 80, //jasność, (-100,100)
  106.                             saturation: 30, // saturacja (-100, 100)
  107.                             weight: 3 //pixels
  108.                         }
  109.                     ]
  110.                 },
  111.  
  112.                 {
  113.                     featureType: 'landscape.man_made', //tutaj wrzucasz typ
  114.                     stylers: [
  115.                         {
  116.                             color: '#dfdbd4', // kolor
  117.                             gamma: 0.8, // gamma
  118.                             hue: '#FF0000', // odcień
  119.                             lightness: 80, //jasność, (-100,100)
  120.                             saturation: 30, // saturacja (-100, 100)
  121.                             weight: 3 //pixels
  122.                         }
  123.                     ]
  124.                 },
  125.  
  126.                 {
  127.                     featureType: 'poi', //tutaj wrzucasz typ
  128.                     stylers: [
  129.                         {
  130.                             color: '#d2e4c8', // kolor
  131.                             gamma: 0.1, // gamma
  132.                             hue: '#FF0000', // odcień
  133.                             lightness: 80, //jasność, (-100,100)
  134.                             saturation: 30, // saturacja (-100, 100)
  135.                             weight: 3 //pixels
  136.                         }
  137.                     ]
  138.                 },
  139.                 <!-- TUTAJ SIE KOŃCZY SEKCJA DO KOPIOWANIA -->
  140.  
  141.                 {
  142.                     featureType: 'poi.attraction', //tutaj wrzucasz typ
  143.                     stylers: [
  144.                         {
  145.                             color: '#d2e4c8', // kolor
  146.                             gamma: 0.1, // gamma
  147.                             hue: '#FF0000', // odcień
  148.                             lightness: 80, //jasność, (-100,100)
  149.                             saturation: 30, // saturacja (-100, 100)
  150.                             weight: 3 //pixels
  151.                         }
  152.                     ]
  153.                 }
  154.                 <!-- TUTAJ SIE KOŃCZY SEKCJA DO KOPIOWANIA -->
  155.             ]
  156.             var mapOptions = {
  157.                 zoom: 12,
  158.                 center: brooklyn,
  159.                 mapTypeControlOptions: {
  160.                     mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
  161.                 },
  162.                 mapTypeId: MY_MAPTYPE_ID
  163.             };
  164.  
  165.             map = new google.maps.Map(document.getElementById('map-canvas'),
  166.                     mapOptions);
  167.  
  168.             var styledMapOptions = {
  169.                 name: 'Custom Style'
  170.             };
  171.  
  172.             var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
  173.  
  174.             map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
  175.         }
  176.  
  177.         google.maps.event.addDomListener(window, 'load', initialize);
  178.  
  179.     </script>
  180. </head>
  181. <body>
  182. <div id="map-canvas"></div>
  183. </body>
  184. </html></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement