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-3.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-3.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: ['flat', google.maps.MapTypeId.ROADMAP] }
  11. };
  12. var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  13. /* スタイル付き地図 */
  14. var styleOptions = [
  15. { 'stylers': [{ 'visibility': 'off' }] },
  16. { 'featureType': 'road', 'stylers': [{ 'visibility': 'on' }, { 'color': '#ffffff' }] },
  17. { 'featureType': 'road.arterial', 'stylers': [{ 'visibility': 'on' }, { 'color': '#fee379' }] },
  18. { 'featureType': 'road.highway', 'stylers': [{ 'visibility': 'on' }, { 'color': '#fee379' }] },
  19. { 'featureType': 'landscape', 'stylers': [{ 'visibility': 'on' }, { 'color': '#f3f4f4' }] },
  20. { 'featureType': 'water', 'stylers': [{ 'visibility': 'on' }, { 'color': '#7fc8ed' }] },
  21. { 'featureType': 'road', 'elementType': 'labels', 'stylers': [{ 'visibility': 'off' }] },
  22. { 'featureType': 'poi.park', 'elementType': 'geometry.fill', 'stylers': [{ 'visibility': 'on' }, { 'color': '#83cead' }] },
  23. { 'featureType': 'poi.business', 'elementType': 'geometry', 'stylers': [{ 'visibility': 'on' }] },
  24. { 'elementType': 'labels', 'stylers': [{ 'visibility': 'off' }] },
  25. { 'featureType': 'transit.line', 'elementType': 'geometry.fill', 'stylers': [{ 'visibility': 'on' }, { 'hue': '#e3b552' }] },
  26. { 'featureType': 'transit.line', 'elementType': 'geometry.stroke', 'stylers': [{ 'visibility': 'on' }, { 'weight': 1.2 }, { 'color': '#9660ac' }, { 'lightness': 25 }] },
  27. { 'featureType': 'landscape.man_made', 'elementType': 'geometry', 'stylers': [{ 'weight': 0.9 }, { 'visibility': 'off' }] }
  28. ];
  29. var styledMapOptions = { name: 'フラットデザイン' }
  30. var flatType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  31. map.mapTypes.set('flat', flatType);
  32. map.setMapTypeId('flat');
  33. }
  34. google.maps.event.addDomListener(window, 'load', initialize);