{"id":2347,"date":"2015-05-19T18:23:02","date_gmt":"2015-05-19T09:23:02","guid":{"rendered":"http:\/\/taitan916.info\/blog\/?p=2347"},"modified":"2024-01-13T12:50:12","modified_gmt":"2024-01-13T03:50:12","slug":"post-2347","status":"publish","type":"post","link":"https:\/\/taitan916.info\/blog\/archives\/2347","title":{"rendered":"Google Maps API\u3067\u30e1\u30a4\u30f3\u30ab\u30e9\u30fc\u3092\u5909\u66f4\u3059\u308b\u65b9\u6cd5"},"content":{"rendered":"

GoogleMapAPI\u3092\u7528\u3044\u305fMAP\u3067\u30ab\u30e9\u30fc\u5909\u66f4\u3092\u3057\u305f\u304b\u3063\u305f\u3002\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u306e\u6307\u5b9a\u304c\u3042\u308c\u3070\u305d\u308c\u306b\u5909\u66f4\u3057\u3001\u7121\u3044\u5834\u5408\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u306b\u3057\u305f\u304b\u3063\u305f\u3002\u307e\u305f\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u3068\u304b\u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u9762\u5012\u306a\u306e\u3067javascript\u3082\u3057\u304f\u306fCSS\u3067\u4f55\u3068\u304b\u3057\u305f\u304b\u3063\u305f\u3002\u4ee5\u4e0b\u306b\u65b9\u6cd5\u3092\u30e1\u30e2\u3002<\/p>\n

 <\/p>\n

\u30de\u30c3\u30d7\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u306b\u4ee5\u4e0b\u8a18\u8ff0\u3092\u52a0\u3048\u308b<\/strong><\/span><\/h2>\n
styles: [\r\n    {\r\n        stylers: [\r\n            {hue: \"#ff0000\"}\/\/\u30ab\u30e9\u30fc\u5909\u66f4\r\n        ]\r\n    }\r\n]<\/pre>\n
 <\/p>\n
\u30af\u30a8\u30ea\u306b\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u304c\u6307\u5b9a\u3057\u3066\u3044\u308b\u5834\u5408\u306f\u8272\u3092\u5909\u66f4\u3059\u308b\u30b5\u30f3\u30d7\u30eb<\/strong><\/span><\/h2>\n
\u8d64\u30d0\u30fc\u30b8\u30e7\u30f3<\/h3>\n
https:\/\/taitan916.info\/sample\/mapcolor\/?color=ff0000<\/a><\/p>\n
\u30c7\u30d5\u30a9\u30eb\u30c8\u30d0\u30fc\u30b8\u30e7\u30f3<\/h3>\n
https:\/\/taitan916.info\/sample\/mapcolor\/<\/a><\/p>\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 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>\u30de\u30c3\u30d7\u306e\u30ab\u30e9\u30fc\u5909\u66f4\u30b5\u30f3\u30d7\u30eb<\/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<style>\r\n#map_canvas {\r\n    width: 100%;\r\n    height: 100%;\r\n    font-size : 12px;\r\n    font-family : Verdana;\r\n    color : black;\r\n}\r\nhtml{height:100%;}\r\nbody{\r\n    height:100%;\r\n    margin:0px;\r\n    font-family: Helvetica,Arial;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n    <div id=\"map_canvas\"><\/div>\r\n    <script>\r\n    var currentWindow = null;\r\n    var latlng = new google.maps.LatLng(34.687315,135.526201);\r\n\r\n    var myOptions = {\r\n        zoom: 16, \r\n        center: latlng, \r\n        mapTypeId: google.maps.MapTypeId.ROADMAP,\r\n        <?php if( $_GET['color'] ){ ?>\r\n        styles: [\r\n            {\r\n                stylers: [\r\n                    {hue: \"#<?php echo $_GET['color'];?>\"}\/\/\u30ab\u30e9\u30fc\u5909\u66f4\r\n                ]\r\n            }\r\n        ]\r\n        <?php } ?>\r\n    };\r\n\r\n    var map = new google.maps.Map(document.getElementById(\"map_canvas\"), myOptions); \/\/map\u751f\u6210\r\n\r\n    var mapData = {\r\n        'x':'34.687315', \r\n        'y':'135.526201',\r\n        'balloon':'\u5927\u962a\u57ce'\r\n    };\r\n    makeMarker(mapData);\r\n\r\n    \/\/\u30de\u30fc\u30ab\u30fc\u4f5c\u6210\r\n    function makeMarker( mapData ){\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) {\r\n                currentWindow.close();\r\n            }\r\n            infoWindow.setContent(mapData.balloon);\r\n            infoWindow.open(map,marker);\r\n            currentWindow = infoWindow;\r\n        });\r\n    }\r\n    <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
GoogleMapAPI\u3092\u7528\u3044\u305fMAP\u3067\u30ab\u30e9\u30fc\u5909\u66f4\u3092\u3057\u305f\u304b\u3063\u305f\u3002\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u306e\u6307 ... <\/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-2347","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