{"id":2403,"date":"2015-07-31T22:22:14","date_gmt":"2015-07-31T13:22:14","guid":{"rendered":"http:\/\/taitan916.info\/blog\/?p=2403"},"modified":"2024-01-13T00:45:52","modified_gmt":"2024-01-12T15:45:52","slug":"post-2403","status":"publish","type":"post","link":"https:\/\/taitan916.info\/blog\/archives\/2403","title":{"rendered":"Google Maps API\u3067\u30de\u30fc\u30ab\u30fc\u304c\u5168\u3066\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u81ea\u52d5\u30ba\u30fc\u30e0\u3059\u308b\u65b9\u6cd5"},"content":{"rendered":"

Google Maps API\u3067\u30de\u30fc\u30ab\u30fc\u3092\u8907\u6570\u8a2d\u7f6e\u3057\u305f\u5834\u5408\u306b\u30ba\u30fc\u30e0\u306e\u5024\u3084\u3001\u30de\u30fc\u30ab\u30fc\u306e\u4f4d\u7f6e\u306b\u3088\u3063\u3066\u306f\u5168\u3066\u306e\u30de\u30fc\u30ab\u30fc\u304c\u8868\u793a\u3055\u308c\u306a\u3044\u5834\u5408\u304c\u3042\u308b\u3002\u3053\u308c\u3092\u4f55\u3068\u304b\u3057\u305f\u304b\u3063\u305f\u3002\u8abf\u3079\u308b\u3068\u81ea\u52d5\u3067\u30ba\u30fc\u30e0\u8abf\u6574\u3067\u304d\u308b\u6a5f\u80fd\u304c\u3042\u308b\u6a21\u69d8\u3002\u4ee5\u4e0b\u306b\u5b9f\u88c5\u65b9\u6cd5\u3092\u30e1\u30e2\u3002<\/p>\n

 <\/p>\n

\u30b5\u30f3\u30d7\u30eb<\/strong><\/h2>\n

https:\/\/taitan916.info\/sample\/autozoom\/<\/a><\/p>\n

 <\/p>\n

\u30bd\u30fc\u30b9<\/strong><\/h2>\n
<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\r\n<head>\r\n<meta name=\"robots\" content=\"noindex, nofollow\" \/>\r\n<meta http-equiv=\"content-type\" content=\"text\/html; charset=utf-8\" \/>\r\n<meta id=\"viewport\" name=\"viewport\" content=\"width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;\" \/>\r\n<title>GoogleMapsAPI\u3000\u81ea\u52d5\u30ba\u30fc\u30e0\u30c6\u30b9\u30c8<\/title>\r\n<script type=\"text\/javascript\" src=\"http:\/\/maps.google.com\/maps\/api\/js?sensor=true\"><\/script> \r\n<meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\" \/>\r\n<\/head>\r\n<body>\r\n\r\n    <div id=\"map_canvas\" style=\"width:500px; height:500px;\"><\/div>\r\n\r\n    <script>\r\n    var mapData = [\r\n        { 'name':'\u5927\u962a\u57ce', 'x':'34.687315', 'y':'135.526201'}, \r\n        { 'name':'\u901a\u5929\u95a3', 'x':'34.644885', 'y':'135.494516'}, \r\n        { 'name':'\u9053\u9813\u5800', 'x':'34.668548', 'y':'135.502715'}, \r\n        { 'name':'\u4eac\u90fd\u30bf\u30ef\u30fc', 'x':'34.987574', 'y':'135.759362'}, \r\n    ];\r\n    var minLat = 999;\r\n    var maxLat = 0;\r\n    var minLng = 999;\r\n    var maxLng = 0;\r\n\r\n    var currentWindow = null;\r\n\r\n    var latlng = new google.maps.LatLng(mapData[0].x, mapData[0].y);\r\n    var myOptions = {\r\n        center: latlng, \r\n        mapTypeId: google.maps.MapTypeId.ROADMAP\r\n    };\r\n\r\n    var map = new google.maps.Map(document.getElementById(\"map_canvas\"), myOptions); \/\/map\u751f\u6210\r\n\r\n    for (var key in mapData){\r\n        makeMarker(mapData[key]);\r\n    }\r\n\r\n    autoZoom( maxLat, minLat, maxLng, minLng );\r\n\r\n    \/\/\u30de\u30fc\u30ab\u30fc\u4f5c\u6210\r\n    function makeMarker( mapData ){\r\n        if( !mapData ) return false;\r\n\r\n        if(mapData.x < minLat) minLat = mapData.x;\r\n        if(mapData.x > maxLat) maxLat = mapData.x;\r\n        if(mapData.y < minLng) minLng = mapData.y;\r\n        if(mapData.y > maxLng) maxLng =mapData.y;\r\n\r\n        var 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        var infoWindow = new google.maps.InfoWindow();\r\n        google.maps.event.addListener(marker, 'click', function() {\r\n            if( currentWindow ) currentWindow.close();\r\n\r\n            infoWindow.setContent(mapData.name);\r\n            infoWindow.open(map,marker);\r\n            currentWindow = infoWindow;\r\n        });\r\n    }\r\n\r\n    \/\/\u30aa\u30fc\u30c8\u30ba\u30fc\u30e0\r\n    function autoZoom( maxLat, minLat, maxLng, minLng ){\r\n        if( !maxLat || !minLat || !maxLng || !minLng ) return false;\r\n\r\n        var sw = new google.maps.LatLng(maxLat,minLng);\r\n        var ne = new google.maps.LatLng(minLat,maxLng);\r\n        var bounds = new google.maps.LatLngBounds(sw, ne);\r\n        map.fitBounds(bounds);\r\n    }\r\n\r\n    <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
 <\/p>\n
\u305d\u306e\u4ed6<\/strong><\/h2>\n
fitBounds\u30e1\u30bd\u30c3\u30c9\u3067\u5bfe\u5fdc\u3067\u304d\u308b\u307f\u305f\u3044\u3002\u3053\u308c\u306f\u4fbf\u5229\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Google Maps API\u3067\u30de\u30fc\u30ab\u30fc\u3092\u8907\u6570\u8a2d\u7f6e\u3057\u305f\u5834\u5408\u306b\u30ba\u30fc\u30e0\u306e\u5024\u3084\u3001\u30de\u30fc\u30ab ... <\/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-2403","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\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