พื้นฐานการสร้าง google maps จาก Maps JavaScript API
- เริ่มจาก ขอ Google API key ก่อน
- จากนั้นลองสร้าง code ง่ายๆ ตามตัวอย่าง
.map { border: #c00000 solid thin; height: 100%; min-height: 500px; }
ส่วนนี้จะเป็น css class ที่ทำให้แน่ใจว่า พื้นที่แสดงแผนที่เห็นสูงอย่างน้อย 500 px เพราะว่าตัว google maps จะเอาความสูงของ div เอาไปใช้ ถ้าไม่กำหนดไว้ถึงสร้างแผนที่ได้ก็อาจจะมองไม่เห็น
- สร้างพื้นที่ไว้แสดงแผนที่ กำหนดให้ id=”mapA”
<div class="map" id="mapA"></div>
- สร้างแผนที่
/* function createMaps */ function createMap(mapArea, position) { var latlng = new google.maps.LatLng(parseFloat(position.latitude), parseFloat(position.longitude)); var infoWindow = new google.maps.InfoWindow; var map = new google.maps.Map(document.getElementById(mapArea), { "zoom": 8 }); map.setCenter(latlng); var marker = new google.maps.Marker({ "map": map, "position": latlng, }); infoWindow.open(map, marker); infoWindow.setContent('Latitude = ' + position.latitude + ', ' + ' longitude = ' + position.longitude); infoWindow.setPosition(latlng); } function initMap(defaultLatitude = 13.7651991, defaultLongitude = 100.5368694) { position = { "latitude": defaultLatitude, "longitude": defaultLongitude, }; createMap('mapA', position); }
- โหลด Google Maps APIs โดยใช้
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=YOUR_API_KEY"></script>
แทนที่ YOUR_API_KEY เป็น key ของเราเอง โดย callback= ตามด้วย function ที่ใช้สร้างแผนที่ หรือ function อื่นๆ ที่จะให้ทำงานหลังโหลดเพจเสร็จ ตามตัวอย่างคือ function initMap จะไม่สร้างแผนที่โดยตรงแต่จะใช้ function createMap สร้างให้อีกที ถ้าต้องการสร้างแผนที่เพิ่ม แค่เรียกใช้
createMap('พื้นที่แสดงแผนที่', { "latitude": ค่า latitude, "longitude": ค่า longitude, });
ก็จะมีแผนที่ที่มีหน้าตาคล้ายๆอีกอันเพิ่มขึ้นมา
ดูตัวอย่างได้ที่ google maps: basic หรือจะลองสร้างไฟล์เอง
@charset "utf-8"; /* CSS Document */ .map { border: #c00000 solid thin; height: 100%; min-height: 500px; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Google Maps APIs > Maps JavaScript API > Simple Map</title> <link href="styles.css" rel="stylesheet" type="text/css"> </head> <body> <div class="map" id="mapA"></div> <script> /* function createMaps */ function createMap(mapArea, position) { var latlng = new google.maps.LatLng(parseFloat(position.latitude), parseFloat(position.longitude)); var infoWindow = new google.maps.InfoWindow; var map = new google.maps.Map(document.getElementById(mapArea), { "zoom": 8 }); map.setCenter(latlng); var marker = new google.maps.Marker({ "map": map, "position": latlng, }); infoWindow.open(map, marker); infoWindow.setContent('Latitude = ' + position.latitude + ', ' + ' longitude = ' + position.longitude); infoWindow.setPosition(latlng); } function initMap(defaultLatitude = 13.7651991, defaultLongitude = 100.5368694) { position = { "latitude": defaultLatitude, "longitude": defaultLongitude, }; createMap('mapA', position); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyDE5zb4r9sbN5S_GcD3NZRED1Ma3FzFqso"></script> </body> </html>
การกำหนด function ให้ทำงานหลังโหลดเพจเสร็จนอกจากใช้ตัวแปร callback แล้วยังสามารถใช้
google.maps.event.addDomListener(window, 'load', initMap);
ได้เหมือนกัน
อ่านเพิ่มเติม
About the author