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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ
BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด
กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: วิธีป้องกันไม่ให้โหลด Google Map แบบ Auto ง่ายๆ ด้วย jQuery

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

โดย tsukasaz » 01/10/2019 2:50 pm

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 978 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 978 times
หลัง Click จะแสดงแผนที่ และไฟล์ต่างๆ ที่ถูกเรียกเข้ามา
after_click.png
after_click.png (393.68 KiB) Viewed 978 times

ข้างบน