{"id":3175,"date":"2020-02-22T14:32:09","date_gmt":"2020-02-22T05:32:09","guid":{"rendered":"https:\/\/taitan916.info\/blog\/?p=3175"},"modified":"2024-02-20T14:35:09","modified_gmt":"2024-02-20T05:35:09","slug":"post-3175","status":"publish","type":"post","link":"https:\/\/taitan916.info\/blog\/archives\/3175","title":{"rendered":"GoogleMapAPI\u3067\u30de\u30c3\u30d7\u81ea\u4f53\u3092\u79fb\u52d5\u3057\u4e2d\u5fc3\u5730\u306e\u7d4c\u5ea6\u7def\u5ea6\u3092\u53d6\u5f97"},"content":{"rendered":"

GoogleMap\u3067\u30de\u30c3\u30d7\u81ea\u4f53\u3092\u30c9\u30e9\u30c3\u30b0\u3057\u3066\u79fb\u52d5\u3057\u305f\u5f8c\u3001\u4e2d\u5fc3\u5730\u306e\u7d4c\u5ea6\u7def\u5ea6\u3092\u53d6\u5f97\u3057\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u306b\u81ea\u52d5\u3067\u5165\u529b\u3055\u305b\u305f\u304b\u3063\u305f\u3002\u4ee5\u4e0b\u306b\u65b9\u6cd5\u3092\u30e1\u30e2\u3002<\/p>\n

 <\/p>\n

HTML\u90e8\u5206<\/h2>\n
<!-- \u4f4f\u6240 -->\r\n<input type=\"text\" name=\"address\" id=\"address\">\r\n<!-- \u4f4f\u6240 -->\r\n\r\n<!-- \u7def\u5ea6 -->\r\n<input type=\"text\" name=\"lat\" id=\"lat\">\r\n<!-- \u7def\u5ea6 -->\r\n\r\n<!-- \u7d4c\u5ea6 -->\r\n<input type=\"text\" name=\"long\" id=\"long\" class=\"form-control form-control-sm\">\r\n<!-- \u7d4c\u5ea6 -->\r\n\r\n<!-- GoogleMap -->\r\n<div id=\"map_canvas\" style=\"width: 100%; height: 300px;\"><\/div>\r\n<!-- GoogleMap --><\/pre>\n
 <\/p>\n
javascript\u90e8\u5206<\/h2>\n
<script type=\"text\/javascript\" src=\"https:\/\/maps.google.com\/maps\/api\/js?sensor=true&key=xxxxxxxxxx\"><\/script>\r\n<script>\r\nvar map;\r\nvar marker;\r\n\r\n\/\/GoogleMap\u521d\u671f\u8868\u793a\r\nvar init_latlng = {'lat' : '35.681236', 'long' : '139.767125'};\r\nvar latlng = new google.maps.LatLng(init_latlng.lat, init_latlng.long);\r\nvar myOptions = {\r\n    zoom: 12, \r\n    gestureHandling: \"greedy\" ,\r\n    center: latlng, \r\n    mapTypeId: google.maps.MapTypeId.ROADMAP, \r\n    \"streetViewControl\": false, \r\n    \"fullscreenControl\": false, \r\n    \"styles\": false, \r\n    \"disableDoubleClickZoom\": false, \r\n    \"mapTypeControl\": false, \r\n};\r\nvar map = new google.maps.Map(document.getElementById(\"map_canvas\"), myOptions);\r\nvar mapData = { 'x':init_latlng.lat, 'y':init_latlng.long };\r\n\r\n\/\/\u30de\u30fc\u30ab\u30fc\u8a2d\u7f6e\r\nmakeMarker(mapData);\r\n\r\n\/\/\u30de\u30fc\u30ab\u30fc\u4f5c\u6210\u7528\u95a2\u6570\r\nfunction makeMarker( mapData ){\r\n    marker = new google.maps.Marker({\r\n        position : new google.maps.LatLng(mapData.x,mapData.y), \r\n        map: map, \r\n    });\r\n}\r\n\r\n\/\/\u30de\u30c3\u30d7\u79fb\u52d5\u3067\u7d4c\u5ea6\u7def\u5ea6\u53d6\u5f97\r\nmap.addListener('drag', dragLatLng);\r\nfunction dragLatLng(){\r\n\r\n    \/\/\u30de\u30c3\u30d7\u306e\u4e2d\u5fc3\u5ea7\u6a19\u3092\u53d6\u5f97\r\n    var center_latlng = map.getCenter();\r\n\r\n    \/\/\u7d4c\u5ea6\u7def\u5ea6\u3092\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u306b\u5165\u529b\r\n    $('#lat').val(center_latlng.lat());\r\n    $('#long').val(center_latlng.lng());\r\n\r\n    \/\/\u65e2\u5b58\u30de\u30fc\u30ab\u30fc\u3092\u6d88\u53bb\r\n    marker.setMap(null);\r\n\r\n    \/\/\u30de\u30fc\u30ab\u30fc\u8a2d\u7f6e\r\n    mapData = { 'x':center_latlng.lat(), 'y':center_latlng.lng() };\r\n    makeMarker(mapData);\r\n}\r\n<\/script><\/pre>\n
 <\/p>\n
\u30c9\u30e9\u30c3\u30b0\u30a4\u30d9\u30f3\u30c8\u3068\u4e2d\u5fc3\u5730\u306e\u53d6\u5f97<\/h2>\n
map.addListener('drag', dragLatLng);<\/h3>\n
\u4e0a\u8a18\u3067\u30c9\u30e9\u30c3\u30b0\u30a4\u30d9\u30f3\u30c8\u3092\u53d6\u5f97\u3057dragLatLng\u95a2\u6570\u3092\u547c\u3073\u51fa\u3057\u3066\u3044\u308b\u3002\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9\u306f\u3053\u3061\u3089<\/a>\u3002<\/p>\n
var center_latlng = map.getCenter();<\/h3>\n
getCenter()\u3067\u7d4c\u5ea6\u7def\u5ea6\u3092\u53d6\u5f97\u3057center_latlng\u5909\u6570\u306b\u683c\u7d0d\u3057\u3066\u3044\u308b\u3002\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9\u306f\u3053\u3061\u3089<\/a>\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
GoogleMap\u3067\u30de\u30c3\u30d7\u81ea\u4f53\u3092\u30c9\u30e9\u30c3\u30b0\u3057\u3066\u79fb\u52d5\u3057\u305f\u5f8c\u3001\u4e2d\u5fc3\u5730\u306e\u7d4c\u5ea6\u7def\u5ea6\u3092\u53d6\u5f97\u3057 ... <\/p>\n","protected":false},"author":1,"featured_media":1423,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[71,70],"tags":[],"class_list":["post-3175","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-maps-api","category-google"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/3175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/comments?post=3175"}],"version-history":[{"count":2,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/3175\/revisions"}],"predecessor-version":[{"id":4720,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/posts\/3175\/revisions\/4720"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/media\/1423"}],"wp:attachment":[{"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/media?parent=3175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/categories?post=3175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/taitan916.info\/blog\/wp-json\/wp\/v2\/tags?post=3175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}