{"id":2508,"date":"2015-09-10T13:32:44","date_gmt":"2015-09-10T05:32:44","guid":{"rendered":"http:\/\/blog.hoyo.idv.tw\/?p=2508"},"modified":"2018-04-24T21:42:31","modified_gmt":"2018-04-24T13:42:31","slug":"%e7%b6%b2%e8%b7%af%e5%9c%b0%e5%9c%96%e7%9a%84%e6%a8%99%e6%b3%a8-%e4%bd%bf%e7%94%a8-google-map-v3","status":"publish","type":"post","link":"https:\/\/blog.hoyo.idv.tw\/?p=2508","title":{"rendered":"Google Map v3 \u4f7f\u7528\u4e00\uff1a\u5b9a\u4f4d\u3001\u6a19\u6ce8\u3001\u6a19\u6ce8\u8aaa\u660e"},"content":{"rendered":"<h2>\u53c3\u8003\u8cc7\u6e90<\/h2>\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/adding-a-google-map\" target=\"_blank\" rel=\"noopener\">Maps JavaScript API<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/icon-simple\">Simple marker icons<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/infowindow-simple\">Info windows<\/a><\/li>\n<\/ul>\n<p>--<\/p>\n<h2>\u64c1\u6709\u81ea\u5df1\u7684 API KEY<\/h2>\n<p>\u73fe\u5728\u7684 Google Map \u90fd\u9700\u8981\u4f7f\u7528\u7684 API KEY \u00a0\u624d\u80fd\u4f7f\u7528\uff0c\u4ee5\u524d\u7684\u00a0signed_in=true \u5df2\u7d93\u6c92\u6709\u4f5c\u7528\u4e86<\/p>\n<p>--<\/p>\n<h2>\u7a0b\u5f0f\u7bc4\u4f8b\u4e00\uff1a\u5c07\u5730\u5716\u79fb\u52d5\u5230\u60f3\u8981\u7684\u4f4d\u7f6e<\/h2>\n<pre class=\"lang:default decode:true\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;title&gt;Google Map 1: \u5b9a\u4f4d\u5230\u6307\u5b9a\u4f4d\u7f6e&lt;\/title&gt;\r\n    &lt;style&gt;\r\n        html, body {\r\n            height: 100%;\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n        #map {\r\n            height: 100%;\r\n        }\r\n    &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;div id=\"map\"&gt;&lt;\/div&gt;\r\n&lt;script&gt;\r\n    function initMap() {\r\n        var m1 = {lat: 22.99777881, lng: 120.1644631};\r\n        var map = new google.maps.Map(document.getElementById('map'), {\r\n            zoom: 15,\r\n            center: m1,\r\n            disableDefaultUI: true,\r\n            zoomControl: false,\r\n            scrollWheel: false,\r\n            scaleControl: false,\r\n            draggable: false,\r\n            styles: [\r\n            ]\r\n\r\n        });\r\n    }\r\n&lt;\/script&gt;\r\n&lt;script async defer src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOU_API_KEY&amp;callback=initMap\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>--<\/p>\n<h2 style=\"font-style: normal; line-height: 24.375px;\">\u7a0b\u5f0f\u7bc4\u4f8b\u4e8c\uff1a\u52a0\u4e0a\u4e00\u500b\u6a19\u8a18<\/h2>\n<pre class=\"lang:default decode:true \">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;title&gt;Google Map 2: \u52a0\u4e0a\u6a19\u6ce8&lt;\/title&gt;\r\n    &lt;style&gt;\r\n        html, body {\r\n            height: 100%;\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n        #map {\r\n            height: 100%;\r\n        }\r\n    &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;div id=\"map\"&gt;&lt;\/div&gt;\r\n&lt;script&gt;\r\n    function initMap() {\r\n        var m1 = {lat: 22.99777881, lng: 120.1644631};\r\n        var map = new google.maps.Map(document.getElementById('map'), {\r\n            zoom: 15,\r\n            center: m1,\r\n            disableDefaultUI: true,\r\n            zoomControl: false,\r\n            scrollWheel: false,\r\n            scaleControl: false,\r\n            draggable: false,\r\n            styles: [\r\n            ]\r\n\r\n        });\r\n\r\n        var marker = new google.maps.Marker({\r\n            position: m1,\r\n            map: map,\r\n            title: 'Hello World!'\r\n        });\r\n    }\r\n&lt;\/script&gt;\r\n&lt;script async defer src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOU_API_KEY&amp;callback=initMap\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>--<\/p>\n<h2>\u7a0b\u5f0f\u7bc4\u4f8b\u4e09\uff1a\u6a19\u8a18\u9ede\u9078\u986f\u793a\u8a73\u7d30\u8cc7\u8a0a<\/h2>\n<p>&nbsp;<\/p>\n<p>--<\/p>\n<ol>\n<li>\u5728\u6307\u5b9a\u5730\u9ede\u52a0\u4e0a\u81ea\u8a02\u5716\u6848\u6a19\u6ce8<\/li>\n<li>\u8a72\u6a19\u6ce8\u53ef\u9ede\u64ca\u8df3\u51fa\u8cc7\u8a0a\u8996\u7a97<\/li>\n<li>\u53d6\u6d88\u5176\u4ed6\u63a7\u5236\u5730\u5716\u64cd\u4f5c\uff0c\u4f8b\u5982\u62d6\u66f3\u3001\u6efe\u8f2a\u653e\u5927\u7e2e\u5c0f\u7b49\u3002\u53c3\u8003\u00a0<a href=\"http:\/\/stackoverflow.com\/questions\/2330197\/how-to-disable-mouse-scroll-wheel-scaling-with-google-maps-api\">How to disable mouse scroll-wheel scaling with Google Maps API<\/a><\/li>\n<\/ol>\n<pre class=\"lang:default decode:true\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\"&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;Simple icons&lt;\/title&gt;\r\n    &lt;style&gt;\r\n        html, body {\r\n            height: 100%;\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n        #map {\r\n            height: 100%;\r\n        }\r\n    &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;div id=\"map\"&gt;&lt;\/div&gt;\r\n&lt;script&gt;\r\n\r\n    \/\/ This example adds a marker to indicate the position of Bondi Beach in Sydney,\r\n    \/\/ Australia.\r\n    function initMap() {\r\n        var map = new google.maps.Map(document.getElementById('map'), {\r\n            zoom: 15\r\n            ,center: {lat: 22.9912764, lng: 120.1762381}\r\n            ,panControl: false\r\n            ,zoomControl: false\r\n            ,scaleControl: false\r\n            ,scrollwheel: false\r\n            ,navigationControl: false\r\n            ,mapTypeControl: false\r\n            ,draggable: false\r\n            ,disableDoubleClickZoom: true\r\n        });\r\n        \r\n        var image = '\/img\/Oauth\/facebook.png';\r\n        var beachMarker = new google.maps.Marker({\r\n            position: {lat: 22.9912764, lng: 120.1762381}, \/\/ 22.9912764,120.1762381\r\n            map: map,\r\n            icon: image\r\n        });\r\n\r\n        beachMarker.addListener('click', function() {\r\n            infowindow.open(map, beachMarker);\r\n        });\r\n        var contentString = '&lt;div id=\"content\"&gt;'+\r\n                '&lt;div id=\"siteNotice\"&gt;'+\r\n                '&lt;\/div&gt;'+\r\n                '&lt;h1 id=\"firstHeading\" class=\"firstHeading\"&gt;Uluru&lt;\/h1&gt;'+\r\n                '&lt;div id=\"bodyContent\"&gt;'+\r\n                '&lt;p&gt;&lt;b&gt;Uluru&lt;\/b&gt;, also referred to as &lt;b&gt;Ayers Rock&lt;\/b&gt;, is a large ' +\r\n                'sandstone rock formation in the southern part of the '+\r\n                'Northern Territory, central Australia. It lies 335&amp;#160;km (208&amp;#160;mi) '+\r\n                'south west of the nearest large town, Alice Springs; 450&amp;#160;km '+\r\n                '(280&amp;#160;mi) by road. Kata Tjuta and Uluru are the two major '+\r\n                'features of the Uluru - Kata Tjuta National Park. Uluru is '+\r\n                'sacred to the Pitjantjatjara and Yankunytjatjara, the '+\r\n                'Aboriginal people of the area. It has many springs, waterholes, '+\r\n                'rock caves and ancient paintings. Uluru is listed as a World '+\r\n                'Heritage Site.&lt;\/p&gt;'+\r\n                '&lt;p&gt;Attribution: Uluru, &lt;a href=\"https:\/\/en.wikipedia.org\/w\/index.php?title=Uluru&amp;oldid=297882194\"&gt;'+\r\n                'https:\/\/en.wikipedia.org\/w\/index.php?title=Uluru&lt;\/a&gt; '+\r\n                '(last visited June 22, 2009).&lt;\/p&gt;'+\r\n                '&lt;\/div&gt;'+\r\n                '&lt;\/div&gt;';\r\n\r\n        var infowindow = new google.maps.InfoWindow({\r\n            content: contentString\r\n        });\r\n    }\r\n\r\n&lt;\/script&gt;\r\n&lt;script async defer\r\n        src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?signed_in=true&amp;callback=initMap\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>--<\/p>\n<h2>\u9078\u64c7\u5730\u9ede\u4e0a\u50b3\u53ca\u5d4c\u5165\u7db2\u9801<\/h2>\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/maps\/documentation\/embed\/guide\" target=\"_blank\" rel=\"noopener\">Google Maps Embed API<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/maps\/documentation\/geocoding\/intro\" target=\"_blank\" rel=\"noopener\">Geocoding API\u00a0Developer's Guide<\/a><\/li>\n<li><a href=\"http:\/\/talkerscode.com\/webtricks\/get-address-longitude-and-latitude-using-php-and-google-map-api.php\" target=\"_blank\" rel=\"noopener\">Get Address,Longitude And Latitude Using PHP And Google Map API<\/a><\/li>\n<\/ul>\n<pre class=\"lang:default decode:true\">http:\/\/maps.google.com\/maps\/api\/geocode\/json?address=\u53f0\u5357\u5e02\u4e2d\u897f\u5340\u6210\u529f\u8def1\u865f<\/pre>\n<p>\u56de\u50b3 Json<\/p>\n<pre class=\"lang:default decode:true\">{\r\n   \"results\" : [\r\n      {\r\n         \"address_components\" : [\r\n            {\r\n               \"long_name\" : \"1\",\r\n               \"short_name\" : \"1\",\r\n               \"types\" : [ \"street_number\" ]\r\n            },\r\n            {\r\n               \"long_name\" : \"Chenggong Road\",\r\n               \"short_name\" : \"Chenggong Rd\",\r\n               \"types\" : [ \"route\" ]\r\n            },\r\n            {\r\n               \"long_name\" : \"\u8d64\u5d4c\u91cc\",\r\n               \"short_name\" : \"\u8d64\u5d4c\u91cc\",\r\n               \"types\" : [ \"administrative_area_level_4\", \"political\" ]\r\n            },\r\n            {\r\n               \"long_name\" : \"West Central District\",\r\n               \"short_name\" : \"West Central District\",\r\n               \"types\" : [ \"administrative_area_level_3\", \"political\" ]\r\n            },\r\n            {\r\n               \"long_name\" : \"Tainan City\",\r\n               \"short_name\" : \"Tainan City\",\r\n               \"types\" : [ \"administrative_area_level_1\", \"political\" ]\r\n            },\r\n            {\r\n               \"long_name\" : \"Taiwan\",\r\n               \"short_name\" : \"TW\",\r\n               \"types\" : [ \"country\", \"political\" ]\r\n            },\r\n            {\r\n               \"long_name\" : \"700\",\r\n               \"short_name\" : \"700\",\r\n               \"types\" : [ \"postal_code\" ]\r\n            }\r\n         ],\r\n         \"formatted_address\" : \"No. 1, Chenggong Rd, West Central District, Tainan City, Taiwan 700\",\r\n         \"geometry\" : {\r\n            \"location\" : {\r\n               \"lat\" : 22.9972758,\r\n               \"lng\" : 120.2106438\r\n            },\r\n            \"location_type\" : \"ROOFTOP\",\r\n            \"viewport\" : {\r\n               \"northeast\" : {\r\n                  \"lat\" : 22.9986247802915,\r\n                  \"lng\" : 120.2119927802915\r\n               },\r\n               \"southwest\" : {\r\n                  \"lat\" : 22.9959268197085,\r\n                  \"lng\" : 120.2092948197085\r\n               }\r\n            }\r\n         },\r\n         \"place_id\" : \"ChIJ1ZIKf4t2bjQRV_U2L0H5HHE\",\r\n         \"types\" : [ \"street_address\" ]\r\n      }\r\n   ],\r\n   \"status\" : \"OK\"\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>\u7db2\u9801 HTML<\/p>\n<p>\u5c07\u67e5\u8a62\u5230\u7684\u7d93\u7def\u5ea6 lat, lng \u5957\u5165\u5230 Google maps embedded \u7684\u7db2\u5740\u5167<\/p>\n<pre class=\"lang:default decode:true \">&lt;iframe width=\"300\" height=\"170\" frameborder=\"0\" scrolling=\"no\" src=\"https:\/\/www.google.com\/maps\/embed\/v1\/place?q=22.9972758,120.2084551&amp;key=....\"&gt;&lt;\/iframe&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>--<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"2508\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;2,675&nbsp;total views<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u53c3\u8003\u8cc7\u6e90 Maps JavaS...<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"2508\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;2,675&nbsp;total views<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[180],"tags":[69,253],"_links":{"self":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/2508"}],"collection":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2508"}],"version-history":[{"count":11,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/2508\/revisions"}],"predecessor-version":[{"id":2511,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/2508\/revisions\/2511"}],"wp:attachment":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}