วิธีป้องกันไม่ให้โหลด Google Map แบบ Auto ง่ายๆ ด้วย jQuery

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21911
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

วิธีป้องกันไม่ให้โหลด Google Map แบบ Auto ง่ายๆ ด้วย jQuery

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

Google Map เป็น 1 ในบริการของ Google สำหรับใช้แสดงแผนที่แบบออนไลน์ ซึ่งในส่วนของนักพัฒนาระบบที่ต้องการนำความสามารถของตัว Google Map ไปใช้งาน ทาง Google ก็ได้เปิดให้สามารถเรียกใช้งานได้ผ่าน API โดยเมื่อก่อนนี้ระบบต่างๆ ที่นำ Google Map ไปใช้ จะสามารถเรียกใช้งานได้อย่างอิสระและไม่มีค่าใช้จ่าย

แต่ภายหลังทาง 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>
การแสดงผล
map_normal.png
map_normal.png (358.14 KiB) Viewed 968 times
จะสังเกตว่าเมื่อเปิดหน้าเว็บไซต์ขึ้นมามันจะแสดงแผนที่แบบอัตโนมัติเลย อันนี้จะเป็น Script แบบพื้นฐานที่ทาง Google มีตัวอย่างให้

ทีนี้จะขออธิบายการทำงานหน่อยนะครับ ในส่วนของ Script จะเห็นว่ามีการไปเรียกไฟล์จาก https://maps.googleapis.com มาใช้ และกำหนด callback เท่ากับ initMap คือ เมื่อมันไปเรียกไฟล์มาแล้ว มันจะเริ่มทำงานทันทีใน function ที่ชื่อว่า initMap บรรทัดนี้แหละที่เป็นส่วนที่ทำให้แผนที่มันแสดงทันที เราจะปรับใหม่โดยลบบรรทัดที่เรียกไฟล์ของเดิมออกไป และใช้ jQuery เข้ามาช่วยในการเรียกไฟล์เมื่อคลิกแทน คำสั่งที่ใช้คือ jQuery.getScript()

สร้างปุ่มสำหรับกด

โค้ด: เลือกทั้งหมด

<button id="showMap">แสดงแผนที่</button>
ส่วนที่จะเพิ่มเติมใน 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>

โค้ดทั้งหมด

โค้ด: เลือกทั้งหมด

<!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 เลย
before_click.png
before_click.png (66.58 KiB) Viewed 968 times
หลัง Click จะแสดงแผนที่ และไฟล์ต่างๆ ที่ถูกเรียกเข้ามา
after_click.png
after_click.png (393.68 KiB) Viewed 968 times
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 34