1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  5. <title>スタイルサンプルスニペット - モノクロでシンプルにキメる</title>
  6. <link rel="stylesheet" href="css/style.css">
  7. <script src="http://maps.googleapis.com/maps/api/js"></script>
  8. <script src="js/sample-9-1.js"></script>
  9. </head>
  10. <body>
  11. <div id="map_canvas"></div>
  12. </body>
  13. </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-1.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: ['mono', google.maps.MapTypeId.ROADMAP] }
  11. };
  12. var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  13. /* スタイル付き地図 */
  14. var styleOptions = [ { 'elementType': 'geometry', 'stylers': [ { 'gamma': 0.8 }, { 'saturation': -100 }, { 'visibility': 'simplified' }, { 'lightness': 20 } ] },{ 'elementType': 'labels', 'stylers': [ { 'visibility': 'off' } ] },{ 'featureType': 'poi.park', 'elementType': 'geometry', 'stylers': [ { 'lightness': 30 }, { 'visibility': 'on' } ] },{ 'featureType': 'road.highway', 'elementType': 'geometry', 'stylers': [ { 'visibility': 'simplified' } ] },{ 'featureType': 'landscape', 'elementType': 'geometry', 'stylers': [ { 'visibility': 'off' } ] },{ 'featureType': 'road', 'stylers': [ { 'lightness': 100 } ] },{ 'featureType': 'transit.line', 'elementType': 'geometry', 'stylers': [ { 'visibility': 'on' }, { 'lightness': 30 } ] },{ 'featureType': 'poi.business', 'elementType': 'geometry', 'stylers': [ { 'lightness': -10 }, { 'visibility': 'on' } ] } ];
  15. var styledMapOptions = { name: 'モノクロでシンプルにキメる' }
  16. var monoType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  17. map.mapTypes.set('mono', monoType);
  18. map.setMapTypeId('mono');
  19. }
  20. google.maps.event.addDomListener(window, 'load', initialize);