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-4.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-4.js
  3. * スタイルサンプルスニペット - ざらざらペーパーノイズ
  4. */
  5. function TextureMapType(tileSize) {
  6. this.tileSize = tileSize;
  7. }
  8. TextureMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  9. var div = ownerDocument.createElement('div');
  10. div.style.width = this.tileSize.width + 'px';
  11. div.style.height = this.tileSize.height + 'px';
  12. div.style.background = 'url(./img/paper_noise.png)';
  13. div.style.backgroundSize = '256px 256px';
  14. return div;
  15. };
  16. function initialize() {
  17. var latlng = new google.maps.LatLng(35.681382, 139.766084);
  18. var myOptions = {
  19. zoom: 14,
  20. center: latlng,
  21. mapTypeControlOptions: { mapTypeIds: ['flat', google.maps.MapTypeId.ROADMAP] }
  22. };
  23. var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  24. /* オーバーレイ マップタイプを挿入 */
  25. map.overlayMapTypes.insertAt(0, new TextureMapType(new google.maps.Size(256, 256)));
  26. /* スタイル付き地図 */
  27. var styleOptions = [
  28. { 'elementType': 'labels', 'stylers': [{ 'visibility': 'off' }] },
  29. { 'elementType': 'geometry', 'stylers': [{ 'color': '#c1e9f9' }] },
  30. { 'featureType': 'water', 'stylers': [{ 'color': '#92c6e1' }] },
  31. { 'featureType': 'landscape', 'elementType': 'geometry', 'stylers': [{ 'color': '#fafafa' }] },
  32. { 'featureType': 'poi', 'elementType': 'geometry', 'stylers': [{ 'color': '#c1e9f9' }] },
  33. { 'featureType': 'road', 'elementType': 'labels.text', 'stylers': [{ 'visibility': 'on' }, { 'saturation': -100 }, { 'lightness': 20 }, { 'weight': 4 }] },
  34. { 'featureType': 'road', 'elementType': 'geometry', 'stylers': [{ 'visibility': 'simplified' }, { 'color': '#dddddd' }] },
  35. { 'featureType': 'road.highway', 'elementType': 'geometry', 'stylers': [{ 'color': '#cccccc' }] },
  36. { 'featureType': 'transit.line', 'elementType': 'geometry.stroke', 'stylers': [{ 'color': '#336292' }] },
  37. { 'featureType': 'transit.line', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#fafafa' }] }
  38. ];
  39. var styledMapOptions = { name: 'ペーパー' }
  40. var flatType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  41. map.mapTypes.set('flat', flatType);
  42. map.setMapTypeId('flat');
  43. }
  44. google.maps.event.addDomListener(window, 'load', initialize);