{"id":4774,"date":"2024-05-22T11:54:29","date_gmt":"2024-05-22T02:54:29","guid":{"rendered":"https:\/\/dandelions.co.jp\/blog\/?p=4774"},"modified":"2024-05-22T11:54:29","modified_gmt":"2024-05-22T02:54:29","slug":"2024-05-22-2","status":"publish","type":"post","link":"https:\/\/dandelions.co.jp\/blog\/blog\/2024\/05\/22\/2024-05-22-2\/","title":{"rendered":"Google\u00a0Maps Platform\u3067\u5730\u56f3\u3092\u51fa\u3057\u3066\u307f\u305f"},"content":{"rendered":"\n

\u6280\u8853\u8005\u30d6\u30ed\u30b0\u3068\u984c\u3057\u3066\u793e\u54e1\u304c\u65e5\u3054\u308d\u53d6\u308a\u7d44\u3093\u3067\u3044\u308b\u5b66\u7fd2\u5185\u5bb9\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002
\u4eca\u56de\u306fWEB\u30c7\u30b6\u30a4\u30f3\u3092\u30c6\u30fc\u30de\u306b\u3057\u3066\u3044\u308b\u7b2c0\u30e6\u30cb\u30c3\u30c8\u3067\u3059\u3002
\u672c\u8a18\u4e8b\u3067\u306fGoogle Maps Platform\u3092\u4f7f\u3063\u3066\u307f\u305f\u306e\u3067\u7d39\u4ecb\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n

Google Maps Platform\u3068\u306f<\/h2>\n\n\n\n

Google Maps Platform\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001Google Map\u306e\u6a5f\u80fd\u3092\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u3084\u30a2\u30d7\u30ea\u306b\u57cb\u3081\u8fbc\u3080\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
Google Maps Platform\u306e\u8a73\u7d30\u306f\u516c\u5f0f\u30da\u30fc\u30b8\u3067\u7d39\u4ecb\u3055\u308c\u3066\u3044\u307e\u3059\u3002
https:\/\/mapsplatform.google.com<\/a><\/p>\n\n\n\n

\u4e8b\u524d\u6e96\u5099<\/h2>\n\n\n\n

Google Maps Platform\u3092\u4f7f\u3046\u305f\u3081\u306b\u306f\u4e8b\u524d\u306b\u3001Google\u30a2\u30ab\u30a6\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u652f\u6255\u3044\u306e\u8a2d\u5b9a\u3092\u3057\u3066\u304a\u304f\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002
\u652f\u6255\u3044\u306e\u8a2d\u5b9a\u306fGoogle Cloud\u304b\u3089\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
https:\/\/cloud.google.com\/<\/a>
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

API\u30ad\u30fc\u53d6\u5f97<\/h2>\n\n\n\n

Google Maps API\u3092\u4f7f\u7528\u3059\u308b\u306b\u306f\u3001API\u30ad\u30fc\u3092\u53d6\u5f97\u3092\u53d6\u5f97\u3057\u3066\u304a\u304f\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002
API\u30ad\u30fc\u306e\u53d6\u5f97\u306f\u300c\u6709\u52b9\u306aAPI\u3068\u30b5\u30fc\u30d3\u30b9\u300d\u304b\u3089\u884c\u3044\u307e\u3059\u3002<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u300cMaps JavaScript API\u300d\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u300c\u9375\u3068\u8a8d\u8a3c\u60c5\u5831\u300dAPI\u30ad\u30fc\u304b\u3089API\u30ad\u30fc\u3092\u53d6\u5f97\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

MAP\u306e\u8868\u793a<\/h2>\n\n\n\n

\u5730\u56f3\u306e\u8868\u793a<\/h3>\n\n\n\n

API\u306f\u300cDynamic Library Import\u300d\u3001\u300cNPM js-api-loader \u30d1\u30c3\u30b1\u30fc\u30b8\u300d\u306e\u65b9\u6cd5\u3067\u5229\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
\u5229\u7528\u65b9\u6cd5\u306e\u8a73\u7d30\u306f\u516c\u5f0f\u306e\u30ac\u30a4\u30c9\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044
Maps JavaScript API \u3092\u8aad\u307f\u8fbc\u3080<\/a><\/p>\n\n\n\n


\u4e0b\u8a18\u306f\u5730\u56f3\u3092\u51fa\u3059\u30b5\u30f3\u30d7\u30eb\u30bd\u30fc\u30b9\u3067\u3059\u3002<\/p>\n\n\n\n

<!DOCTYPE html>\n<!--\n @license\n Copyright 2019 Google LLC. All Rights Reserved.\n SPDX-License-Identifier: Apache-2.0\n-->\n<html>\n  <head>\n    <title>Add Map<\/title>\n\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\".\/style.css\" \/>\n    http:\/\/js\/map.js<\/a>\n  <\/head>\n  <body>\n    <h3>My Google Maps Demo<\/h3>\n    <!--The div element for the map -->\n    <div id=\"map\"><\/div>\n\n    <!-- prettier-ignore -->\n    <script>(g=>{var h,a,k,p=\"The Google Maps JavaScript API\",c=\"google\",l=\"importLibrary\",q=\"__ib__\",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement(\"script\"));e.set(\"libraries\",[...r]+\"\");for(k in g)e.set(k.replace(\/[A-Z]\/g,t=>\"_\"+t[0].toLowerCase()),g[k]);e.set(\"callback\",c+\".maps.\"+q);a.src=`https:\/\/maps.${c}apis.com\/maps\/api\/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+\" could not load.\"));a.nonce=m.querySelector(\"script[nonce]\")?.nonce||\"\";m.head.append(a)}));d[l]?console.warn(p+\" only loads once. Ignoring:\",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})\n        ({key: \"{API\u30ad\u30fc}\", v: \"beta\"});<\/script>\n        \n    <script>\n      \/\/ Initialize and add the map\n      let map;\n      \n      async function initMap() {\n      \n          \/\/ Request needed libraries.\n          \/\/@ts-ignore\n          const { Map } = await google.maps.importLibrary(\"maps\");\n          const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\")\n      \n      \n          \/\/ \u5730\u56f3\u306e\u521d\u671f\u8a2d\u5b9a\n          map = new Map(document.getElementById(\"map\"), {\n              zoom: 18,\n              center: position1,\n              mapId: \"DEMO_MAP_ID\",\n          });\n      \n          \/\/ \u30d4\u30f3\u306e\u5730\u70b9\u3092\u8a2d\u5b9a\n          const position1 = { lat: 35.165455654239224, lng: 136.90517107048055 };\n          const position2 = { lat: 35.16480168326663, lng: 136.90544465580453 };\n\n          \/\/ \u5730\u56f3\u306b\u30d4\u30f3\u3092\u8a2d\u5b9a\u3059\u308b\n          const marker = new AdvancedMarkerElement({\n              map: map,\n              position: position1,\n              title: \"\u30ca\u30c7\u30a3\u30a2\u30d1\u30fc\u30af\",\n          });\n      \n          const marker2 = new AdvancedMarkerElement({\n              map: map,\n              position: position2,\n              title: \"\u77e2\u5834\u516c\u5712\",\n          });\n      }\n\n      initMap();\n    <\/script>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u5730\u56f3\u306eAPI\u306f\u4e0b\u8a18\u306e\u90e8\u5206\u3067\u8aad\u307f\u8fbc\u3093\u3067\u3044\u307e\u3059\u3002
\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u300cDynamic Library Import\u300d\u3067API\u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u307e\u3059\u3002

script>(g=>{var h,a,k,p=\"The Google Maps JavaScript API\",c=\"google\",l=\"importLibrary\",q=\"__ib__\",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement(\"script\"));e.set(\"libraries\",[...r]+\"\");for(k in g)e.set(k.replace(\/[A-Z]\/g,t=>\"_\"+t[0].toLowerCase()),g[k]);e.set(\"callback\",c+\".maps.\"+q);a.src=`https:\/\/maps.${c}apis.com\/maps\/api\/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+\" could not load.\"));a.nonce=m.querySelector(\"script[nonce]\")?.nonce||\"\";m.head.append(a)}));d[l]?console.warn(p+\" only loads once. Ignoring:\",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})         ({key: \"{API\u30ad\u30fc}\", v: \"beta\"});<\/script><\/code><\/p>\n\n\n\n
\u5730\u56f3\u306e\u8868\u793a\u306f\u4e0b\u8a18\u306e\u90e8\u5206\u3067\u8868\u793a\u3092\u884c\u3063\u3066\u3044\u307e\u3059<\/p>\n\n\n\n
  \u3000\u3000\u3000\u3000\/\/ GoogleMap\u306e\u8aad\u307f\u8fbc\u307f\n\u3000        const { Map } = await google.maps.importLibrary(\"maps\");\n          const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\")\n      \n      \n          \/\/ \u5730\u56f3\u306e\u521d\u671f\u8a2d\u5b9a\n          map = new Map(document.getElementById(\"map\"), {\n              zoom: 18,\n              center: position1,\n              mapId: \"DEMO_MAP_ID\",\n          });<\/code><\/pre>\n\n\n\n
\u307e\u305f\u3001\u4e0b\u8a18\u306e\u3088\u3046\u306b\u30d4\u30f3\u3092\u8907\u6570\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u5730\u56f3\u306b\u8907\u6570\u306e\u30d4\u30f3\u3092\u7acb\u3066\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\/\/ \u30d4\u30f3\u306e\u5730\u70b9\u3092\u8a2d\u5b9a\n          const position1 = { lat: 35.165455654239224, lng: 136.90517107048055 };\n          const position2 = { lat: 35.16480168326663, lng: 136.90544465580453 };\n\n          \/\/ \u5730\u56f3\u306b\u30d4\u30f3\u3092\u8a2d\u5b9a\u3059\u308b\n          const marker = new AdvancedMarkerElement({\n              map: map,\n              position: position1,\n              title: \"\u30ca\u30c7\u30a3\u30a2\u30d1\u30fc\u30af\",\n          });\n      \n          const marker2 = new AdvancedMarkerElement({\n              map: map,\n              position: position2,\n              title: \"\u77e2\u5834\u516c\u5712\",\n          });<\/code><\/pre>\n\n\n\n
\u4eca\u56de\u306fGoogle Maps Platform\u3092\u4f7f\u3063\u3066\u5730\u56f3\u3092\u8868\u793a\u3057\u305f\u308a\u3001
\u5730\u56f3\u306b\u30d4\u30f3\u3092\u7acb\u3066\u308b\u65b9\u6cd5\u3092\u307e\u3068\u3081\u307e\u3057\u305f\u3002

\u6b21\u56de\u306e\u7b2c0\u30e6\u30cb\u30c3\u30c8\u306e\u6280\u8853\u8005\u30d6\u30ed\u30b0\u3082\u304a\u697d\u3057\u307f\u306b\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u6280\u8853\u8005\u30d6\u30ed\u30b0\u3068\u984c\u3057\u3066\u793e\u54e1\u304c\u65e5\u3054\u308d\u53d6\u308a\u7d44\u3093\u3067\u3044\u308b\u5b66\u7fd2\u5185\u5bb9\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002\u4eca\u56de\u306fWEB\u30c7\u30b6\u30a4\u30f3\u3092\u30c6\u30fc\u30de\u306b\u3057\u3066\u3044\u308b\u7b2c0\u30e6\u30cb\u30c3\u30c8\u3067\u3059\u3002\u672c\u8a18\u4e8b\u3067\u306fGoogle Maps Platform\u3092\u4f7f\u3063\u3066\u307f\u305f\u306e\u3067\u7d39\u4ecb\u3057\u3066\u3044\u304d\u307e\u3059\u3002  … <\/p>\n
“Google\u00a0Maps Platform\u3067\u5730\u56f3\u3092\u51fa\u3057\u3066\u307f\u305f” \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[8],"tags":[41,9],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paR9rw-1f0","_links":{"self":[{"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/posts\/4774"}],"collection":[{"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/comments?post=4774"}],"version-history":[{"count":4,"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/posts\/4774\/revisions"}],"predecessor-version":[{"id":4971,"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/posts\/4774\/revisions\/4971"}],"wp:attachment":[{"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/media?parent=4774"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/categories?post=4774"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/tags?post=4774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}