{"id":6847,"date":"2019-02-06T10:00:39","date_gmt":"2019-02-06T01:00:39","guid":{"rendered":"https:\/\/www.gigas-jp.com\/appnews\/?p=6847"},"modified":"2019-03-19T19:36:32","modified_gmt":"2019-03-19T10:36:32","slug":"%e6%96%b0%e4%ba%ba%e6%97%a5%e8%aa%8c2","status":"publish","type":"post","link":"https:\/\/www.gigas-jp.com\/appnews\/archives\/6847","title":{"rendered":"\u65b0\u4eba\u65e5\u8a8c2"},"content":{"rendered":"

Web<\/span>\u30da\u30fc\u30b8\u4e0a\u306bGoogle<\/span>\u30de\u30c3\u30d7\u3092\u8868\u793a\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/span><\/span><\/span><\/p>\n

\"\"<\/p>\n

<\/p>\n

\u307e\u305a\u3001JavascriptAPI<\/span>\u3092\u5229\u7528\u3059\u308b\u305f\u3081\u306bAPIKey<\/span>\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002<\/span><\/p>\n

https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key<\/a><\/span><\/p>\n

\u3092\u53c2\u8003\u306b\u3057\u3066\u53d6\u5f97\u3001\u6709\u52b9\u5316\u3057\u307e\u3059\u3002<\/span><\/p>\n

<\/p>\n

html<\/span>\u5185body<\/span>\u8981\u7d20\u306bdiv<\/span>\u8981\u7d20\u3092\u4f5c\u308a\u307e\u3059\u3002<\/span><\/span><\/span><\/p>\n

body<\/span>\u306e\u30b9\u30bf\u30a4\u30ebheight<\/span>\u3068div<\/span>\u306e\u30b9\u30bf\u30a4\u30ebheight<\/span>\u306b100<\/span>\uff05\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/span><\/span><\/span><\/p>\n

\u3053\u306ediv<\/span>\u306bgoogle<\/span>\u30de\u30c3\u30d7\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/span><\/p>\n

div<\/span>\u306b\u5206\u304b\u308a\u3084\u3059\u3044\u3088\u3046\u306b map <\/span>\u3068\u3044\u3046id<\/span>\u3092\u3064\u3051\u307e\u3057\u3087\u3046\u3002<\/span><\/span><\/span><\/p>\n

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

\u5148\u307b\u3069\u4f5c\u3063\u305fdiv<\/span>\u306e\u7d42\u308f\u308a\u306bGoogle<\/span>\u30de\u30c3\u30d7\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306ejavascript<\/span>\u3092\u66f8\u304d\u307e\u3059\u3002<\/span><\/p>\n

\u95a2\u6570\u306e\u540d\u524d\u306f\u3000initMap<\/span>\u3000\u3068\u3057\u307e\u3059\u3002<\/span><\/p>\n

function<\/span> initMap<\/span>() {<\/span><\/span><\/p>\n

                <\/span>var<\/span> mapPosition<\/span> = { <\/span>lat:<\/span> 35.170662<\/span>, <\/span>lng:<\/span> 136.923430<\/span> };<\/span><\/span><\/p>\n

                <\/span>var<\/span> mapArea<\/span> = <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>‘max_shop_search_maps’<\/span>);<\/span><\/span><\/p>\n

                <\/span>var<\/span> mapOptions<\/span> = {<\/span><\/span><\/p>\n

                    <\/span>center:<\/span> mapPosition<\/span>,<\/span><\/span><\/p>\n

                    <\/span>zoom:<\/span> 16<\/span>,<\/span><\/span><\/p>\n

                    <\/span>mapTypeControl:<\/span> true<\/span>, <\/span>\/\/<\/span>\u30de\u30c3\u30d7\u30bf\u30a4\u30d7<\/span> \u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/span><\/span><\/p>\n

                    <\/span>fullscreenControl:<\/span> false<\/span>, <\/span>\/\/<\/span>\u5168\u753b\u9762\u8868\u793a\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/span><\/span><\/p>\n

                    <\/span>streetViewControl:<\/span> false<\/span>, <\/span>\/\/<\/span>\u30b9\u30c8\u30ea\u30fc\u30c8\u30d3\u30e5\u30fc<\/span> \u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/span><\/span><\/p>\n

                    <\/span>zoomControl:<\/span> false<\/span>, <\/span>\/\/<\/span>\u30ba\u30fc\u30e0<\/span> \u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/span><\/span><\/p>\n

                };<\/span><\/span><\/p>\n

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

                <\/span>\/\/<\/span>\u30de\u30c3\u30d7\u3092\u751f\u6210\u3059\u308b<\/span>Map<\/span>\u30af\u30e9\u30b9<\/span><\/span><\/p>\n

                <\/span>var<\/span> gmap<\/span> = <\/span>new<\/span> google<\/span>.<\/span>maps<\/span>.<\/span>Map<\/span>(<\/span>mapArea<\/span>, <\/span>mapOptions<\/span>);<\/span><\/span><\/p>\n

            }<\/span><\/span><\/p>\n

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

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

\u30fb<\/span>  <\/span><\/span>mapPosition<\/span>\u306f\u8868\u793a\u3057\u305f\u969b\u306e\u521d\u671f\u4e2d\u5fc3\u4f4d\u7f6e<\/span><\/span><\/span><\/p>\n

var<\/span> mapPosition<\/span> = { <\/span>lat:<\/span>\/*<\/span>\u4efb\u610f\u306e\u7def\u5ea6<\/span>*\/<\/span>, <\/span>lng<\/span>:<\/span>\/*<\/span>\u4efb\u610f\u306e\u7d4c\u5ea6<\/span>*\/<\/span> };<\/span><\/span><\/p>\n

\u30fb<\/span>mapArea<\/span>\u306f\u5148\u307b\u3069\u4f5c\u3063\u305fdiv<\/span>\u306eid<\/span>\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/span><\/span><\/span><\/p>\n

var<\/span> mapArea<\/span> = <\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>‘map’<\/span>);<\/span><\/span><\/p>\n

\u30fb<\/span>mapOptions<\/span>\u306b\u8868\u793a\u3059\u308b\u969b\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u66f8\u304d\u307e\u3059\u3002<\/span><\/span><\/span><\/p>\n

var<\/span> mapOptions<\/span> = {<\/span><\/span><\/p>\n

                    <\/span>center:<\/span> mapPosition<\/span>,<\/span><\/span><\/p>\n

                    <\/span>zoom:<\/span> 16<\/span>,<\/span><\/span><\/p>\n

                    <\/span>mapTypeControl:<\/span> false<\/span>, <\/span>\/\/<\/span>\u30de\u30c3\u30d7\u30bf\u30a4\u30d7<\/span> \u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/span><\/span><\/p>\n

                    <\/span>fullscreenControl:<\/span> false<\/span>, <\/span>\/\/<\/span>\u5168\u753b\u9762\u8868\u793a\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/span><\/span><\/p>\n

                    <\/span>streetViewControl:<\/span> false<\/span>, <\/span>\/\/<\/span>\u30b9\u30c8\u30ea\u30fc\u30c8\u30d3\u30e5\u30fc<\/span> \u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/span><\/span><\/p>\n

                    <\/span>zoomControl:<\/span> false<\/span>, <\/span>\/\/<\/span>\u30ba\u30fc\u30e0<\/span> \u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/span><\/span><\/p>\n

                };<\/span><\/span><\/p>\n

\u30fbcenter <\/span>\u306b mapPosition<\/span>\u306b\u5165\u308c\u305f\u521d\u671f\u4e2d\u5fc3\u4f4d\u7f6e\u3092\u8a2d\u5b9a<\/span><\/span><\/span><\/p>\n

\u30fbzoom <\/span>\u306b\u62e1\u5927\u5ea6\u3092\u8a2d\u5b9a<\/span><\/span><\/span><\/p>\n

\u30fb<\/span>\uff5e\uff5eControl<\/span>\u306f\u5730\u56f3\u4e0a\u306b\u8868\u793a\u3055\u308c\u308b\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u30dc\u30bf\u30f3\u306e\u8868\u793a\u8a2d\u5b9a\u3067\u3059\u3002<\/span><\/p>\n

\u3000\u3000\u3000(True<\/span>\u3067\u8868\u793a\u3001false<\/span>\u3067\u975e\u8868\u793a)<\/span><\/span><\/span><\/span><\/p>\n

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

\u6700\u5f8c\u306b <\/span><\/p>\n

gmap = new<\/span> google<\/span>.<\/span>maps<\/span>.<\/span>Map<\/span>(<\/span>mapArea<\/span>, <\/span>mapOptions<\/span>)<\/span><\/span><\/p>\n

\u3067\u30de\u30c3\u30d7\u3092\u4f5c\u6210\u3057\u5909\u6570gmap<\/span>\u306b\u4fdd\u6301\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/span><\/p>\n

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

\u6b21\u306bgoogle<\/span>\u30de\u30c3\u30d7API<\/span>\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u8aad\u307f\u8fbc\u3080\u305f\u3081\u306b<\/span><\/p>\n

<<\/span>script<\/span> src<\/span>=<\/span>“http:\/\/maps.googleapis.com\/maps\/api\/js?key={ApiKey}&callback=initMap”<\/span>async<\/span>><\/<\/span>script<\/span>><\/span><\/span><\/p>\n

\u30fb<\/span>key={<\/span>\u53d6\u5f97\u3057\u3066\u304d\u305fAPIKey}<\/span><\/span><\/span><\/span><\/p>\n

\u30fb<\/span>callback={<\/span>\u5148\u307b\u3069\u4f5c\u6210\u3057\u305f\u30de\u30c3\u30d7\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306einitMap}<\/span><\/span><\/span><\/span><\/p>\n

\u3068\u3057\u307e\u3059\u3002<\/span><\/p>\n

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

gmap<\/span>\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u8868\u793a\u5ea7\u6a19\u3092\u64cd\u4f5c\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/span><\/span><\/span><\/p>\n

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

\u6c34\u66dc\u62c5\u5f53\uff1aTanaka<\/p>\n\n\n

<\/p>\n

\n
<\/g:plusone><\/div>\n
\"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>