{"id":4389,"date":"2015-07-16T10:09:20","date_gmt":"2015-07-16T01:09:20","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=4389"},"modified":"2019-11-12T11:19:13","modified_gmt":"2019-11-12T02:19:13","slug":"post-4389","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/google-map-api\/4389","title":{"rendered":"Leaflet.js\u3067Google Maps \u3092\u8868\u793a\u3059\u308b"},"content":{"rendered":"<p>\u300cLeaflet\u3067\u30b0\u30fc\u30b0\u30eb\u30de\u30c3\u30d7\u3063\u3066\u4f7f\u3048\u306a\u3044\u3093\u3067\u3059\u304b\uff1f\u300d\u3068\u3044\u3046\u8cea\u554f\u304c\u591a\u304b\u3063\u305f\u306e\u3067\u66f8\u3044\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n<h2>Google Maps Tile\u3092\u8868\u793a\u3059\u308b<\/h2>\n<p>Leaflet\u3067Google Maps\u306e\u5730\u56f3\u3092\u8868\u793a\u3059\u308b\u306b\u306f<a href=\"https:\/\/gitlab.com\/IvanSanchez\/Leaflet.GridLayer.GoogleMutant\">Leaflet&#46;GridLayer&#46;GoogleMutant<\/a>\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f7f\u3046\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\n\u307e\u305f\u3001leaflet\u4ee5\u5916\u306bGoogle Maps API\u3082\u8aad\u307f\u8fbc\u3080\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"lang:js decode:true \" >&lt;!-- Google Maps API --&gt;\n&lt;script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=API\u30ad\u30fc\u3092\u3053\u3053\u306b\u8a18\u8ff0\" async defer&gt;&lt;\/script&gt;\n\n&lt;!-- Leaflet --&gt;\n&lt;link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.3.4\/dist\/leaflet.css\"\n    integrity=\"sha512-puBpdR0798OZvTTbP4A8Ix\/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb\/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==\"\n    crossorigin=\"\" \/&gt;\n&lt;script src=\"https:\/\/unpkg.com\/leaflet@1.3.4\/dist\/leaflet.js\"\n    integrity=\"sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==\"\n    crossorigin=\"\"&gt;&lt;\/script&gt;\n    \n   \n&lt;!-- Leaflet Google Maps Plugin --&gt;\n&lt;script src='https:\/\/unpkg.com\/leaflet.gridlayer.googlemutant@latest\/Leaflet.GoogleMutant.js'&gt;&lt;\/script&gt;<\/pre>\n<h3>Hello Gmaps<\/h3>\n<p><a href=\"https:\/\/shimz.me\/example\/leaflet\/googleMaps\/HelloGmaps\/index.html\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/07\/leafletandGoogle1.jpg\" alt=\"leaflet and Google\" width=\"590\" height=\"353\" class=\"aligncenter size-full wp-image-4390 border\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/07\/leafletandGoogle1.jpg 590w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/07\/leafletandGoogle1-251x150.jpg 251w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/shimz.me\/example\/leaflet\/googleMaps\/HelloGmaps\/index.html\">example<\/a><\/p>\n<pre class=\"lang:js decode:true \" >\nvar map = new L.Map('map', {center: new L.LatLng(36.3219088\u3000, 139.0032936), zoom: 13});\n\nvar GmapsROA = L.gridLayer.googleMutant({\n    maxZoom: 24,\n    type:'roadmap' \/\/\u5730\u56f3\n});\nvar GmapsSAT =  L.gridLayer.googleMutant({\n    maxZoom: 24,\n    type:'satellite' \/\/\u822a\u7a7a\u5199\u771f\n\n}); \nvar GmapsHYB = L.gridLayer.googleMutant({\n    maxZoom: 24,\n    type:'hybrid' \/\/\u822a\u7a7a\u5199\u771f&\u30e9\u30d9\u30eb\n});\nvar GmapsTER  = L.gridLayer.googleMutant({\n    maxZoom: 24,\n    type:'terrain' \/\/\u5730\u5f62\u5730\u56f3\n}); \n\nmap.addLayer(GmapsROA);\nmap.addControl(new L.Control.Layers({\n    'Google Roadmap':GmapsROA,\n    'Google Satellite':GmapsSAT,\n    'Google Hybrid':GmapsHYB,\n    'Google Terrain':GmapsTER\n}, {}));\n<\/pre>\n<h2>\u30ab\u30b9\u30bf\u30e0\u30b9\u30bf\u30a4\u30eb\u3092\u4f7f\u3046<\/h2>\n<p>Google Maps API \u306e\u30b9\u30bf\u30a4\u30eb\u6307\u5b9a\u6a5f\u80fd\u3082\u4f7f\u3048\u307e\u3059\u3002<\/p>\n<p><a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/styling?hl=ja\">Styled Maps \u00a0 | \u00a0 Google Maps JavaScript API \u00a0 | \u00a0 Google Developers<\/a><\/p>\n<p><a href=\"https:\/\/shimz.me\/example\/leaflet\/googleMaps\/CustomStyle\/index.html\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/07\/leafletandGoogle2.jpg\" alt=\"leaflet and Google custom style\" width=\"590\" height=\"353\" class=\"aligncenter size-full wp-image-4391 border\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/07\/leafletandGoogle2.jpg 590w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/07\/leafletandGoogle2-251x150.jpg 251w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/shimz.me\/example\/leaflet\/googleMaps\/CustomStyle\/index.html\">example<\/a><\/p>\n<pre class=\"lang:js decode:true \" >var map = new L.Map('map', {center: new L.LatLng(36.3219088\u3000, 139.0032936), zoom: 13});\n \n\/\/Google Maps \u306e\u30b9\u30bf\u30a4\u30eb\u6307\u5b9a\nvar styles = [{\"elementType\":\"geometry\",\"stylers\":[{\"hue\":\"#ff4400\"},{\"saturation\":-68},{\"lightness\":-4},{\"gamma\":0.72}]},{\"featureType\":\"road\",\"elementType\":\"labels.icon\"},{\"featureType\":\"landscape.man_made\",\"elementType\":\"geometry\",\"stylers\":[{\"hue\":\"#0077ff\"},{\"gamma\":3.1}]},{\"featureType\":\"water\",\"stylers\":[{\"hue\":\"#00ccff\"},{\"gamma\":0.44},{\"saturation\":-33}]},{\"featureType\":\"poi.park\",\"stylers\":[{\"hue\":\"#44ff00\"},{\"saturation\":-23}]},{\"featureType\":\"water\",\"elementType\":\"labels.text.fill\",\"stylers\":[{\"hue\":\"#007fff\"},{\"gamma\":0.77},{\"saturation\":65},{\"lightness\":99}]},{\"featureType\":\"water\",\"elementType\":\"labels.text.stroke\",\"stylers\":[{\"gamma\":0.11},{\"weight\":5.6},{\"saturation\":99},{\"hue\":\"#0091ff\"},{\"lightness\":-86}]},{\"featureType\":\"transit.line\",\"elementType\":\"geometry\",\"stylers\":[{\"lightness\":-48},{\"hue\":\"#ff5e00\"},{\"gamma\":1.2},{\"saturation\":-23}]},{\"featureType\":\"transit\",\"elementType\":\"labels.text.stroke\",\"stylers\":[{\"saturation\":-64},{\"hue\":\"#ff9100\"},{\"lightness\":16},{\"gamma\":0.47},{\"weight\":2.7}]}];\n \nvar GmapsROA = L.gridLayer.googleMutant({\n    maxZoom: 24,\n    styles:styles, \/\/\u30b9\u30bf\u30a4\u30eb\u3092\u6307\u5b9a\n    type:'roadmap'\n});\n    \n    \nmap.addLayer(GmapsROA);\nmap.addControl(new L.Control.Layers( {'Google':GmapsROA}, {}));\n\n<\/pre>\n<p>\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306f\u3001\u300c<a href=\"https:\/\/mapbuildr.com\/\">Google MapBuildr<\/a>\u300d\u306a\u3069\u306e\u30b5\u30fc\u30d3\u30b9\u3092\u5229\u7528\u3059\u308b\u3068\u4fbf\u5229\u3067\u3059\u3002<\/p>\n<p><strong>\u3055\u3041\u3053\u308c\u3067Leaflet\u3092\u4f7f\u308f\u306a\u3044\u7406\u7531\u306f\u7121\u304f\u306a\u308a\u307e\u3057\u305f\u306d\uff01<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u300cLeaflet\u3067\u30b0\u30fc\u30b0\u30eb\u30de\u30c3\u30d7\u3063\u3066\u4f7f\u3048\u306a\u3044\u3093\u3067\u3059&hellip;<\/p>\n","protected":false},"author":1,"featured_media":4391,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37,55],"tags":[],"class_list":["post-4389","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-map-api","category-leaflet-js","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/4389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/comments?post=4389"}],"version-history":[{"count":1,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/4389\/revisions"}],"predecessor-version":[{"id":6601,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/4389\/revisions\/6601"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/4391"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=4389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=4389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=4389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}