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

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 10298
Joined: 18/04/2012 9:39 am

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

Postby 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 ของตัวเองก่อน)

Code: Select all

<!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 61 times


จะสังเกตว่าเมื่อเปิดหน้าเว็บไซต์ขึ้นมามันจะแสดงแผนที่แบบอัตโนมัติเลย อันนี้จะเป็น Script แบบพื้นฐานที่ทาง Google มีตัวอย่างให้

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

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

Code: Select all

<button id="showMap">แสดงแผนที่</button>

ส่วนที่จะเพิ่มเติมใน Script

Code: Select all

<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>



โค้ดทั้งหมด

Code: Select all

<!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 61 times


หลัง Click จะแสดงแผนที่ และไฟล์ต่างๆ ที่ถูกเรียกเข้ามา
after_click.png
after_click.png (393.68 KiB) Viewed 61 times
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 5 guests