Advertisement
Guest User

Untitled

a guest
Jan 29th, 2015
160
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.52 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.                     elementType: 'labels',
  32.                     stylers: [
  33.                         { visibility: 'off' }
  34.                     ]
  35.                 },
  36.                 {
  37.                     featureType: 'water',
  38.                     stylers: [
  39.                         { color: '#890000' }
  40.                     ]
  41.                 },
  42.                 {
  43.                     featureType: 'road', //tutaj wrzucasz typ
  44.                     stylers: [
  45.                         {
  46.                             color: '#0091DA', // kolor
  47.                             gamma: 0.8, // gamma
  48.                             hue: '#FF0000', // odcień
  49.                             lightness: 80, //jasność, (-100,100)
  50.                             saturation: 30, // saturacja (-100, 100)
  51.                             weight: 10 //pixels
  52.                         }
  53.                     ]
  54.                 }
  55.             ];
  56.  
  57.             var mapOptions = {
  58.                 zoom: 12,
  59.                 center: brooklyn,
  60.                 mapTypeControlOptions: {
  61.                     mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
  62.                 },
  63.                 mapTypeId: MY_MAPTYPE_ID
  64.             };
  65.  
  66.             map = new google.maps.Map(document.getElementById('map-canvas'),
  67.                     mapOptions);
  68.  
  69.             var styledMapOptions = {
  70.                 name: 'Custom Style'
  71.             };
  72.  
  73.             var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
  74.  
  75.             map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
  76.         }
  77.  
  78.         google.maps.event.addDomListener(window, 'load', initialize);
  79.  
  80.     </script>
  81. </head>
  82. <body>
  83. <div id="map-canvas"></div>
  84. </body>
  85. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement