More Related Content More from Bajaree Tameeyong (11) 1. Week 4 บาจรีย์ 1
Script Program( Java Script )
วันที่ 25 ม.ค. 2560
Week 4
พิมพ์ค้นหาใน google ว่า google map api javascript ตามภาพ
เมื่อเข้าไปแล้วจะปรากฏดังภาพ และทาการลงชื่อเข้าใช้
2. Week 4 บาจรีย์ 2
คลิกที่ปุ่ม GET A KEY จะขึ้นหน้าต่างตามภาพ ให้กด YES และคลิก cleate and enable API
จะได้หน้าต่าง ดังภาพ จะมี KEY ขึ้น เขียนว่า Your API Key
โค้ดที่ ได้ AIzaSyC2ezLJE5dWSvK-fOt42p-DD4xTzk0oDUE
3. Week 4 บาจรีย์ 3
Copy โค้ดที่ได้ไว้ใน Editplus ดังภาพ
**** กด Ctrl N จะมี Unititled 2 อันขึ้นมามุมล่างซ้าย ****
กลับมาที่ web browser เดิมแล้วคลิกที่ Samples จะได้ดังภาพ
4. Week 4 บาจรีย์ 4
คลิก simple map จะได้ ดังภาพ
จะปรากฏโค้ด ดังภาพ ให้ทาการ copy โค้ดมาวางใน EditPlus
5. Week 4 บาจรีย์ 5
****โค้ดที่ปรากฏ****
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the
div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key= YOUR_API_KEY &callback=in
itMap"
async defer></script>
</body>
</html>
6. Week 4 บาจรีย์ 6
นา API KEY ที่ copy มาในตอนแรกมาวางแทนตาแหน่งที่เขียนว่า YOUT API KEY ดังภาพ
เมื่อนามาวางแล้วจะได้ดังภาพ
7. Week 4 บาจรีย์ 7
จากนั้น save และเลือก .html
เข้า my computer เพื่อไปเปิดไฟล์ ที่เราบันทึกไว้ออกมา
8. Week 4 บาจรีย์ 8
จะปรากฏ ดังภาพ
มุมซ้ายบนเมื่อคลิกคาว่า แผนที่ เลือกที่ภูมิประเทศก็จะปรากฏเห็นภูเขาชัดเจนขึ้น
9. Week 4 บาจรีย์ 9
หากคลิกที่คาว่า ดาวเทียม ก็จะได้ดังภาพ
ลากรูปคนตัวสีเหลืองตรงมุมขวาล่างไปวางตามตาแหน่งต่างๆ จะ ได้ภาพ street view
(ออกจากตาแหน่งเดิม กด ที่มุมบนซ้าย)
10. Week 4 บาจรีย์ 10
ถ้าเปลี่ยน ละติจูด ลองจิจูด ของบรรทัดนี้จะสามารถเปลี่ยนสถานที่หรือประเทศได้
ประเทศไทย คือเปลี่ยน (lat : 13 และ lng : 100) และ save
11. Week 4 บาจรีย์ 11
เมื่อเปิดภาพมา จะได้ดังนี้
หากอยากได้ ม.บูรพา ก็พิมพ์พิกัดลงไป ดังภาพ
12. Week 4 บาจรีย์ 12
ในบรรทัดที่ 28คือการซูม ให้แก้เป็น 15 (พอดี) และ save
**** เลขมากยิ่ง zoom in ****
เปิดภาพมา จะได้ดังภาพ
13. Week 4 บาจรีย์ 13
<!doctype html> คือการประกาศว่าตอนนี้ใช้ html 5
Style คือการกาหนดว่า website จะจัดวางอย่างไร (ประกาศภายใต้ head)
14. Week 4 บาจรีย์ 14
100 % คือสั่งว่าภาพของแผนที่จะปรากฏเต็มหน้าจอเลย
ถ้าเปลี่ยนจาก 100% เป็น 50% จะได้ขนาดของแผนที่ ดังภาพ
15. Week 4 บาจรีย์ 15
ลองปรับแก้ตัวเลขในส่วนต่างๆของ body ดังนี้
Height : ความสูง
Margin : กรอบระยะห่างด้านบน
Padding : การเว้นวรรคด้านหน้า
**** เมื่อลองปรับแก้ตัวเลขดู****
16. Week 4 บาจรีย์ 16
บรรทัดที่ 22 หากลบออก
****แผนที่จะหายไป ดังภาพ ดังนั้นนับว่ามีความสาคัญ****
17. Week 4 บาจรีย์ 17
**** เพิ่มเติม****
New คือการสร้างใหม่
จากภาพคือคาสั่งให้สร้าง map โดย
Document (อยู่ในส่วนของ object).getElement (อยู่ในส่วนของ method)
18. Week 4 บาจรีย์ 18
***** หาก browser ขึ้นอย่างนี้ แสดงว่า KEY ผิด *****
