參考資源
--
擁有自己的 API KEY
現在的 Google Map 都需要使用的 API KEY 才能使用，以前的 signed_in=true 已經沒有作用了
--
程式範例一：將地圖移動到想要的位置
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <title>Google Map 1: 定位到指定位置</title> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body> <div id="map"></div> <script> function initMap() { var m1 = {lat: 22.99777881, lng: 120.1644631}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 15, center: m1, disableDefaultUI: true, zoomControl: false, scrollWheel: false, scaleControl: false, draggable: false, styles: [ ] }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOU_API_KEY&callback=initMap"></script> </body> </html> |
--
程式範例二：加上一個標記
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <title>Google Map 2: 加上標注</title> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body> <div id="map"></div> <script> function initMap() { var m1 = {lat: 22.99777881, lng: 120.1644631}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 15, center: m1, disableDefaultUI: true, zoomControl: false, scrollWheel: false, scaleControl: false, draggable: false, styles: [ ] }); var marker = new google.maps.Marker({ position: m1, map: map, title: 'Hello World!' }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOU_API_KEY&callback=initMap"></script> </body> </html> |
--
程式範例三：標記點選顯示詳細資訊
--
- 在指定地點加上自訂圖案標注
- 該標注可點擊跳出資訊視窗
- 取消其他控制地圖操作，例如拖曳、滾輪放大縮小等。參考 How to disable mouse scroll-wheel scaling with Google Maps API
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Simple icons</title> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body> <div id="map"></div> <script> // This example adds a marker to indicate the position of Bondi Beach in Sydney, // Australia. function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 15 ,center: {lat: 22.9912764, lng: 120.1762381} ,panControl: false ,zoomControl: false ,scaleControl: false ,scrollwheel: false ,navigationControl: false ,mapTypeControl: false ,draggable: false ,disableDoubleClickZoom: true }); var image = '/img/Oauth/facebook.png'; var beachMarker = new google.maps.Marker({ position: {lat: 22.9912764, lng: 120.1762381}, // 22.9912764,120.1762381 map: map, icon: image }); beachMarker.addListener('click', function() { infowindow.open(map, beachMarker); }); var contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ '<div id="bodyContent">'+ '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 'sandstone rock formation in the southern part of the '+ 'Northern Territory, central Australia. It lies 335 km (208 mi) '+ 'south west of the nearest large town, Alice Springs; 450 km '+ '(280 mi) by road. Kata Tjuta and Uluru are the two major '+ 'features of the Uluru - Kata Tjuta National Park. Uluru is '+ 'sacred to the Pitjantjatjara and Yankunytjatjara, the '+ 'Aboriginal people of the area. It has many springs, waterholes, '+ 'rock caves and ancient paintings. Uluru is listed as a World '+ 'Heritage Site.</p>'+ '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+ 'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+ '(last visited June 22, 2009).</p>'+ '</div>'+ '</div>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script> </body> </html> |
--
選擇地點上傳及嵌入網頁
- Google Maps Embed API
- Geocoding API Developer's Guide
- Get Address,Longitude And Latitude Using PHP And Google Map API
|
1 |
http://maps.google.com/maps/api/geocode/json?address=台南市中西區成功路1號 |
回傳 Json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
{ "results" : [ { "address_components" : [ { "long_name" : "1", "short_name" : "1", "types" : [ "street_number" ] }, { "long_name" : "Chenggong Road", "short_name" : "Chenggong Rd", "types" : [ "route" ] }, { "long_name" : "赤嵌里", "short_name" : "赤嵌里", "types" : [ "administrative_area_level_4", "political" ] }, { "long_name" : "West Central District", "short_name" : "West Central District", "types" : [ "administrative_area_level_3", "political" ] }, { "long_name" : "Tainan City", "short_name" : "Tainan City", "types" : [ "administrative_area_level_1", "political" ] }, { "long_name" : "Taiwan", "short_name" : "TW", "types" : [ "country", "political" ] }, { "long_name" : "700", "short_name" : "700", "types" : [ "postal_code" ] } ], "formatted_address" : "No. 1, Chenggong Rd, West Central District, Tainan City, Taiwan 700", "geometry" : { "location" : { "lat" : 22.9972758, "lng" : 120.2106438 }, "location_type" : "ROOFTOP", "viewport" : { "northeast" : { "lat" : 22.9986247802915, "lng" : 120.2119927802915 }, "southwest" : { "lat" : 22.9959268197085, "lng" : 120.2092948197085 } } }, "place_id" : "ChIJ1ZIKf4t2bjQRV_U2L0H5HHE", "types" : [ "street_address" ] } ], "status" : "OK" } |
網頁 HTML
將查詢到的經緯度 lat, lng 套入到 Google maps embedded 的網址內
|
1 |
<iframe width="300" height="170" frameborder="0" scrolling="no" src="https://www.google.com/maps/embed/v1/place?q=22.9972758,120.2084551&key=...."></iframe> |
--
2,196 total views, 2 views today