แต่ภายหลังทาง Google ได้เริ่มเก็บค่าบริการ โดยคิดจากจำนวนการเรียก API ที่ระบบต่างๆ ส่งเข้ามา ทำให้ถ้าระบบยิ่งมีการโหลดหรือเรียกใช้ API มากเท่าไหร่ ก็จะยิ่งมีค่าบริการมากขึ้น และด้วยปกติแล้ว Script เบื้องต้นที่ใช้ในการเรียกแผนที่มาแสดง มันจะเรียกใช้งานแบบอัตโนมัติ อาจจะทำให้ระบบหรือเว็บไซต์ที่มีผู้ใช้งานจำนวนมากควบคุมค่าใช้จ่ายส่วนนี้ได้ยาก เพราะฉะนั้นในบทความนี้จะขอแนะนำวิธีที่ช่วยให้ Google Map ไม่โหลดเองแบบ Auto แต่จะกำหนดให้โหลดเมื่อมีการคลิกแสดงแผนที่เท่านั้น
ตัวอย่างโค้ดที่เรียกใช้ Google Map แบบปกตินะครับ (อย่าลืมใส่ API Key ของตัวเองก่อน)
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
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: 13.7245601, lng: 100.493024},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=ใส่ API Key ก่อนนะ&callback=initMap" async defer></script>
</body>
</html>
ทีนี้จะขออธิบายการทำงานหน่อยนะครับ ในส่วนของ Script จะเห็นว่ามีการไปเรียกไฟล์จาก https://maps.googleapis.com มาใช้ และกำหนด callback เท่ากับ initMap คือ เมื่อมันไปเรียกไฟล์มาแล้ว มันจะเริ่มทำงานทันทีใน function ที่ชื่อว่า initMap บรรทัดนี้แหละที่เป็นส่วนที่ทำให้แผนที่มันแสดงทันที เราจะปรับใหม่โดยลบบรรทัดที่เรียกไฟล์ของเดิมออกไป และใช้ jQuery เข้ามาช่วยในการเรียกไฟล์เมื่อคลิกแทน คำสั่งที่ใช้คือ jQuery.getScript()
สร้างปุ่มสำหรับกด
โค้ด: เลือกทั้งหมด
<button id="showMap">แสดงแผนที่</button>
โค้ด: เลือกทั้งหมด
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
jQuery(function($) {
$('#showMap').click(function() {
$.getScript('https://maps.googleapis.com/maps/api/js?key=ใส่ API Key ก่อนนะ&callback=initMap');
$(this).hide();
});
});
</script>
โค้ดทั้งหมด
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<button id="showMap">แสดงแผนที่</button>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 13.7245601, lng: 100.493024},
zoom: 8
});
}
</script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
jQuery(function($) {
$('#showMap').click(function() {
$.getScript('https://maps.googleapis.com/maps/api/js?key=ใส่ API Key ก่อนนะ&callback=initMap');
$(this).hide();
});
});
</script>
</body>
</html>
ก่อน Click จะแสดงแค่ปุ่ม ถ้าใช้เครื่องมือนักพัฒนาเช็ค จะยังไม่เห็นไฟล์ของ Google Map เลย หลัง Click จะแสดงแผนที่ และไฟล์ต่างๆ ที่ถูกเรียกเข้ามา