首先,前往https://code.google.com/apis/console
點選Service
啟用Google Maps API V3
再到API Access取得Key
將以下程式碼貼入到index.html,記得要更改Key number
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=Your key number&sensor=True or False"> </script> <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>
這個程式主要是以map_canvas這個div來當作Maps
mapOptions設定了地圖的初始值,並且將map_canvas建立成一個新的Map
成果如下:
如果覺得這篇解釋不清楚的話,可以參考『Google Maps JavaScript API 第 3 版』
參考資料:
https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-TW#api_key
https://developers.google.com/maps/licensing?hl=zh-tw
https://developers.google.com/maps/documentation/javascript/examples/map-simple?hl=zh-tw