JavaScript – หน้า 9 – PlusMagi's Blog By Pitt Phunsanit

พื้นฐานการสร้าง 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) ;

ได้เหมือนกัน

อ่านเพิ่มเติม

ป้ายกำกับ: JavaScript

Google Maps: basicGoogle Maps: basic