1. <body>
  2. <div id="map_canvas"></div>
  3. </body>
  1. body {
  2. margin: 0;
  3. line-height: 1.6;
  4. font-family: arial, sans-serif;
  5. }
  6. html,
  7. body,
  8. #map_canvas {
  9. width: 100%;
  10. height: 100%;
  11. }
  1. /*
  2. * sample2.js
  3. */
  4. function TextureMapType(tileSize) {
  5. this.tileSize = tileSize;
  6. }
  7. TextureMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  8. var div = ownerDocument.createElement('div');
  9. div.style.width = this.tileSize.width + 'px';
  10. div.style.height = this.tileSize.height + 'px';
  11. div.style.background = 'url(./img/watercolor.png)';
  12. div.style.backgroundSize = '256px 256px';
  13. return div;
  14. };
  15. function initialize() {
  16. var latlng = new google.maps.LatLng(35.361972, 136.616036);
  17. var myOptions = {
  18. zoom: 15,
  19. center: latlng,
  20. disableDefaultUI: true,
  21. zoomControl: true,
  22. mapTypeControl: true,
  23. mapTypeControlOptions: { mapTypeIds: ['mono', google.maps.MapTypeId.ROADMAP] },
  24. scrollwheel: false
  25. };
  26. var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  27. /* オーバーレイ マップタイプを挿入 */
  28. map.overlayMapTypes.insertAt(0, new TextureMapType(new google.maps.Size(256, 256)));
  29. /* スタイル付き地図 */
  30. var styleOptions = [
  31. { 'elementType': 'geometry', 'stylers': [{ 'gamma': 0.8 }, { 'saturation': -100 }, { 'lightness': 20 }] },
  32. { 'elementType': 'labels', 'stylers': [{ 'visibility': 'off' }] },
  33. { 'featureType': 'poi.park', 'elementType': 'geometry', 'stylers': [{ 'lightness': 30 }, { 'visibility': 'on' }] },
  34. { 'featureType': 'poi.attraction', 'elementType': 'labels.icon', 'stylers': [{ 'visibility': 'on' }] },
  35. { 'featureType': 'landscape', 'elementType': 'geometry', 'stylers': [{ 'lightness': -5 }] },
  36. { 'featureType': 'road', 'stylers': [{ 'lightness': 100 }] },
  37. { 'featureType': 'transit.line', 'elementType': 'geometry', 'stylers': [{ 'lightness': 30 }] },
  38. { 'featureType': 'poi.business', 'elementType': 'geometry', 'stylers': [{ 'lightness': -3 }] }
  39. ];
  40. var monoType = new google.maps.StyledMapType(styleOptions, { name: 'モノクロマップ' });
  41. map.mapTypes.set('mono', monoType);
  42. map.setMapTypeId('mono');
  43. }
  44. google.maps.event.addDomListener(window, 'load', initialize);