{"id":6173,"date":"2025-04-09T17:18:32","date_gmt":"2025-04-09T08:18:32","guid":{"rendered":"https:\/\/yorozu.cloudfree.jp\/wordpress\/?p=6173"},"modified":"2025-11-02T15:06:12","modified_gmt":"2025-11-02T06:06:12","slug":"google-maps-marker-advancedmarkerelement","status":"publish","type":"post","link":"https:\/\/yorozu.cloudfree.jp\/wordpress\/?p=6173","title":{"rendered":"google.maps.marker.AdvancedMarkerElement\u3000\uff08\u9014\u4e2d\uff09"},"content":{"rendered":"\n

\uff11\uff0e\u6982\u8981<\/strong><\/h4>\n\n\n\n

<\/p>\n\n\n\n

\uff12\uff0e\u30b5\u30f3\u30d7\u30eb<\/strong><\/h4>\n\n\n\n
<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\n<head>\n  <title>\u5730\u56f3\u4f5c\u6210<\/title>\n  <style>\n    \/* \u4fee\u6b63\u70b9 1: \u5730\u56f3\u30b3\u30f3\u30c6\u30ca\u3092\u6b63\u3057\u304f\u8868\u793a\u3059\u308b\u305f\u3081\u3001html\u3068body\u306e\u9ad8\u3055\u3092\u8a2d\u5b9a *\/\n    html, body {\n        height: 100%;\n        margin: 0;\n        padding: 0;\n    }\n    #map {\n      \/* height\/width\u3092\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u57fa\u6e96(vh\/vw)\u306b\u3059\u308b\u3068\u3088\u308a\u78ba\u5b9f\u306b\u8868\u793a\u3055\u308c\u307e\u3059 *\/\n      height: 90vh; \n      width: 90vw;\n    }\n  <\/style>\n<\/head>\n<body>\n  <div id="map"><\/div>\n  \n  <script async src="https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyCEnjYhWMrvGnsgmk6Y9THGhN7vBWHVvdY&callback=initMap&libraries=places"><\/script>\n  \n  <script>\n    let map;\n    \n    async function initMap() {\n      \/\/ \u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\n      const { Map } = await google.maps.importLibrary("maps");\n      const { InfoWindow } = await google.maps.importLibrary("maps");\n      const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");\n      \n      \/\/ \u5730\u56f3\u306e\u521d\u671f\u5316\n      map = new Map(document.getElementById("map"), {\n        center: { lat: 47.150, lng: 3.550}, \/\/ \u5730\u56f3\u306e\u4e2d\u5fc3\n        zoom: 6,\n        mapId: "historical-map-id", \/\/ \u3053\u3053\u306b\u3054\u81ea\u8eab\u306e\u30de\u30c3\u30d7ID\u3092\u8cbc\u308a\u4ed8\u3051\u3066\u304f\u3060\u3055\u3044\n      });\n      \n      \/\/ \u5404\u30de\u30fc\u30ab\u30fc\u306e\u30c7\u30fc\u30bf\n      const markersData = [\n        { position: { lat: 40.82, lng: 23.85 }, content: '<a href="https:\/\/ksrd.jp\/santarou\/34_JapanRemains\/new_page_50.php?place=\u30a2\u30f3\u30d5\u30a3\u30dd\u30ea\u30b9" target="_blank">\u30a2\u30f3\u30d5\u30a3\u30dd\u30ea\u30b9<\/a>' },\n        { position: { lat: 35.298056, lng: 25.163056 }, content: '<a href="https:\/\/ksrd.jp\/santarou\/34_JapanRemains\/new_page_50.php?place=\u30af\u30ce\u30c3\u30bd\u30b9" target="_blank">\u30af\u30ce\u30c3\u30bd\u30b9<\/a>' },\n        { position: { lat: 37.730833, lng: 22.756111 }, content: '<a href="https:\/\/ksrd.jp\/santarou\/34_JapanRemains\/new_page_50.php?place=\u30df\u30b1\u30fc\u30cd" target="_blank">\u30df\u30b1\u30fc\u30cd<\/a>' },\n      ];\n      \n      \/\/ \u30de\u30fc\u30ab\u30fc\u3068\u60c5\u5831\u30a6\u30a3\u30f3\u30c9\u30a6\u306e\u8a2d\u7f6e\n      markersData.forEach(data => {\n        const pinElement = new PinElement({});\n        \n        const marker = new AdvancedMarkerElement({\n          position: data.position,\n          map: map,\n          content: pinElement.element,\n        });\n        \n        const infoWindow = new InfoWindow({\n          content: data.content,\n        });\n\n        \/\/ \u4fee\u6b63\u70b9 2: InfoWindow.open\u306e\u5f15\u6570\u3092Advanced Marker\u306e\u4ed5\u69d8\u306b\u5408\u308f\u305b\u308b\n        infoWindow.open({ anchor: marker, map }); \/\/ \u6700\u521d\u304b\u3089\u60c5\u5831\u30a6\u30a3\u30f3\u30c9\u30a6\u3092\u958b\n      });\n    }\n  <\/script> \n<\/body>\n<\/html><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
\u30fbGoogle Map\u306e\u6700\u65b0\u6a5f\u80fd\u306b\u3064\u3044\u3066<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[54],"tags":[101],"class_list":["post-6173","post","type-post","status-publish","format-standard","hentry","category-99_","tag-google-map"],"_links":{"self":[{"href":"https:\/\/yorozu.cloudfree.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/6173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yorozu.cloudfree.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yorozu.cloudfree.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yorozu.cloudfree.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/yorozu.cloudfree.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6173"}],"version-history":[{"count":4,"href":"https:\/\/yorozu.cloudfree.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/6173\/revisions"}],"predecessor-version":[{"id":8418,"href":"https:\/\/yorozu.cloudfree.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/6173\/revisions\/8418"}],"wp:attachment":[{"href":"https:\/\/yorozu.cloudfree.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yorozu.cloudfree.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yorozu.cloudfree.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}