1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  6. <title>スタイルサンプルスニペット - ファンシーであったかい感じ</title>
  7. <link rel="stylesheet" href="css/style.css">
  8. <script src="http://maps.googleapis.com/maps/api/js"></script>
  9. <script src="js/sample-9-2.js"></script>
  10. </head>
  11. <body>
  12. <div id="map_canvas"></div>
  13. </body>
  14. </html>
  1. /*
  2. * style.css
  3. */
  4. body { margin: 0; line-height: 1.6; font-family: arial,sans-serif; }
  5. html, body, #map_canvas { width: 100%; height: 100%; }
  1. /*
  2. * sample-9-2.js
  3. * スタイルサンプルスニペット - ファンシーであったかい感じ
  4. */
  5. function initialize() {
  6. var latlng = new google.maps.LatLng(35.681382, 139.766084);
  7. var myOptions = {
  8. zoom: 14,
  9. center: latlng,
  10. mapTypeControlOptions: { mapTypeIds: ['fancy', google.maps.MapTypeId.ROADMAP] }
  11. };
  12. var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  13. /* スタイル付き地図 */
  14. var styleOptions = [ { 'elementType': 'labels', 'stylers': [ { 'visibility': 'off' } ] },{ 'elementType': 'geometry', 'stylers': [ { 'hue': '#ff4d00' }, { 'gamma': 0.8 } ] },{ 'featureType': 'water', 'elementType': 'geometry', 'stylers': [ { 'hue': '#00ccff' }, { 'saturation': 10 }, { 'lightness': 20 } ] },{ 'featureType': 'road.arterial', 'elementType': 'geometry', 'stylers': [ { 'lightness': 100 }, { 'visibility': 'on' } ] },{ 'featureType': 'landscape', 'elementType': 'geometry', 'stylers': [ { 'visibility': 'simplified' }, { 'lightness': -5 }, { 'saturation': 50 }, { 'hue': '#ffe500' } ] },{ 'featureType': 'transit.line', 'elementType': 'geometry', 'stylers': [ { 'visibility': 'on' }, { 'gamma': 0.6 }, { 'lightness': 30 }, { 'saturation': 40 } ] },{ 'featureType': 'landscape.man_made', 'elementType': 'geometry', 'stylers': [ { 'hue': '#ff0000' }, { 'lightness': 40 }, { 'visibility': 'off' } ] },{ 'featureType': 'poi', 'elementType': 'geometry', 'stylers': [ { 'visibility': 'off' } ] },{ 'featureType': 'poi.park', 'elementType': 'geometry', 'stylers': [ { 'visibility': 'simplified' }, { 'hue': '#ccff00' }, { 'lightness': 10 }, { 'saturation': 30 } ] },{ 'featureType': 'road.highway', 'elementType': 'geometry', 'stylers': [ { 'visibility': 'on' }, { 'saturation': 100 }, { 'gamma': 0.8 }, { 'lightness': 50 }, { 'hue': '#ff8800' } ] },{ 'featureType': 'road.local', 'stylers': [ { 'hue': '#ff0000' }, { 'visibility': 'simplified' }, { 'lightness': 100 } ] },{ 'featureType': 'transit.station', 'elementType': 'geometry', 'stylers': [ { 'saturation': 50 }, { 'lightness': 20 }, { 'visibility': 'on' }, { 'hue': '#ff0000' } ] },{ 'featureType': 'poi.business', 'elementType': 'geometry', 'stylers': [ { 'hue': '#ff0000' }, { 'saturation': 80 }, { 'visibility': 'on' } ] },{ 'featureType': 'road', 'elementType': 'labels.text', 'stylers': [ { 'visibility': 'on' }, { 'lightness': 10 }, { 'hue': '#ff8000' }, { 'saturation': 80 }, { 'gamma': 0.8 } ] },{ 'featureType': 'road', 'elementType': 'labels.text.stroke', 'stylers': [ { 'color': '#ffffff' }, { 'weight': 3 } ] } ];
  15. var styledMapOptions = { name: 'ファンシーであったかい感じ' }
  16. var fancyType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  17. map.mapTypes.set('fancy', fancyType);
  18. map.setMapTypeId('fancy');
  19. }
  20. google.maps.event.addDomListener(window, 'load', initialize);