{"id":3177,"date":"2020-03-22T14:45:16","date_gmt":"2020-03-22T05:45:16","guid":{"rendered":"https:\/\/taitan916.info\/blog\/?p=3177"},"modified":"2024-02-20T14:16:52","modified_gmt":"2024-02-20T05:16:52","slug":"post-3177","status":"publish","type":"post","link":"https:\/\/taitan916.info\/blog\/archives\/3177","title":{"rendered":"GoogleMapAPI\u3067\u30af\u30ea\u30c3\u30af\u3057\u305f\u5ea7\u6a19\u306b\u30de\u30fc\u30ab\u30fc\u3092\u8a2d\u7f6e\u3059\u308b\u65b9\u6cd5"},"content":{"rendered":"

GoogleMapAPI\u3067\u30af\u30ea\u30c3\u30af\u3057\u305f\u4f4d\u7f6e\u306b\u30de\u30fc\u30ab\u30fc\u3092\u8a2d\u7f6e\u3057\u3001\u5ea7\u6a19\u306e\u7d4c\u5ea6\u7def\u5ea6\u3092\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u306b\u81ea\u52d5\u3067\u5165\u529b\u3055\u305b\u305f\u304b\u3063\u305f\u3002\u307e\u305f\u3001\u65e2\u306b\u8a2d\u7f6e\u3055\u308c\u3066\u3044\u308b\u30de\u30fc\u30ab\u30fc\u306f\u524a\u9664\u3001\u65b0\u3057\u304f\u8a2d\u7f6e\u3057\u305f\u30de\u30fc\u30ab\u30fc\u304c\u30de\u30c3\u30d7\u306e\u4e2d\u5fc3\u306b\u6765\u308b\u3088\u3046\u79fb\u52d5\u3055\u305b\u305f\u3044\u3002\u4ee5\u4e0b\u306b\u65b9\u6cd5\u3092\u30e1\u30e2\u3002<\/p>\n

 <\/p>\n

\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9<\/h2>\n

https:\/\/developers.google.com\/maps\/documentation\/javascript\/reference\/map?hl=ja#Map.panTo<\/a><\/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=xxxxxxxxxxxxxxxxx\"><\/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\/\/\u30af\u30ea\u30c3\u30af\u3067\u7d4c\u5ea6\u7def\u5ea6\u53d6\u5f97\r\nmap.addListener('click', clickLatLng);\r\nfunction clickLatLng(event){\r\n\r\n    \/\/\u30af\u30ea\u30c3\u30af\u3057\u305f\u4f4d\u7f6e\u306e\u5ea7\u6a19\u3092\u53d6\u5f97\r\n    var click_latlng = event.latLng;\r\n\r\n    \/\/\u7d4c\u5ea6\u7def\u5ea6\u3092\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u306b\u5165\u529b\r\n    $('#lat').val(click_latlng.lat());\r\n    $('#long').val(click_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':click_latlng.lat(), 'y':click_latlng.lng() };\r\n    makeMarker(mapData);\r\n\r\n    \/\/\u30de\u30fc\u30ab\u30fc\u4f4d\u7f6e\u306b\u79fb\u52d5\r\n    map.panTo(new google.maps.LatLng(click_latlng.lat(),click_latlng.lng()));\r\n}\r\n<\/script><\/pre>\n","protected":false},"excerpt":{"rendered":"
GoogleMapAPI\u3067\u30af\u30ea\u30c3\u30af\u3057\u305f\u4f4d\u7f6e\u306b\u30de\u30fc\u30ab\u30fc\u3092\u8a2d\u7f6e\u3057\u3001\u5ea7\u6a19\u306e\u7d4c\u5ea6\u7def\u5ea6\u3092\u30c6 ... <\/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-3177","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-maps-api","category-google"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t