Tạo bản đồ có mini map với Google Map API

Bài đăng này đã không được cập nhật trong 3 năm

Giới thiệu

Mình đang thực hiện chức năng sử dụng Google Map API để vẽ bản đồ trong dự án, trong đó có một số yêu cầu của Khách cần thực hiện, nên mình viết bài này để chia sẻ lại cách thức thực hiện những yêu cầu đó. Tóm tắt lại yêu cầu của Khách như sau

Tạo bản đồ có mini map để đổi chế độ view thay cho button mặc định, khi di chuyển map chính thì mini map cũng sẽ di chuyển theo
Tạo bản đồ với nhiều marker, thay icon marker
Ẩn Google logo, footer của Google Map

Mini map chính là phần map nhỏ của bản đồ Google Map mà chúng ta hay dùng, nó giống như hình sau đây:

Tạo Map từ Google Map API

Đầu tiên chúng ta cần viết mã HTML như sau

<!DOCTYPE html>
<html>
  <head>
    <title>Mini Google Map</title>
    <!-- Include Google Map API -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap"
      defer
    ></script>
  </head>
  <body>
    <!-- Element tạo map chính -->
    <div id="map"></div>
    <script>
        // Function initMap được gọi sau khi tải xong Google Map API, nó sẽ tạo một bản đồ mới
    	function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
          center: { -33.91721, 151.2263 }, // xác định vị trí trung tâm của map
          zoom: 8, // set zoom default là 8 (maximum là 20)
          mapTypeControl: false, // Ẩn button thay đổi mapType mặc định 
        });
      }
    </script>
    <style>
    #map {
      height: 100%;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
      position: relative;
    }
    </style>
  </body>
</html>

Tạo markers

Tiếp theo chúng ta cần tạo ra một danh sách marker bằng cách tao 1 mảng fakeMarkers, sau đó chạy vòng lặp để tạo marker và info window như sau:

    <script>
        ...
    	function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
          center: { -33.91721, 151.2263 }, // xác định vị trí trung tâm của map
          zoom: 8, // set zoom default là 8 (maximum là 20)
          mapTypeControl: false, // Ẩn button thay đổi mapType mặc định 
        });
        
        const fakeMarkers = [
            {
              position: new google.maps.LatLng(-33.91721, 151.2263),
              title: 'Info Window 1'
            },
            {
              position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
              title: 'Info Window 2'
            },
            {
              position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
              title: 'Info Window 3'
            },
            {
              position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
              title: 'Info Window 4'
            },
            {
              position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
              title: 'Info Window 5'
            },
            {
              position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
              title: 'Info Window 6'
            },
            {
              position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
              title: 'Info Window 7'
            },
            {
              position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
              title: 'Info Window 8'
            },
            {
              position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
              title: 'Info Window 9'
            }
         ];

         // Tạo mảng markers và mảng infoWindow
         const markers = [];
         const infoWindow = [];

          // Duyệt vòng lặp fakeMarkers
          for (let i = 0; i < fakeMarkers.length; i++) {
              markers[i] = new google.maps.Marker({ // Tạo item markeer
                position: fakeMarkers[i].position,
                icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/info-i_maps.png', // Thay icon marker default
                map: map,
              });

              // Tạo HTML cho content info window 
              const dom = document.createElement('div');
              dom.className = 'gmap-info-window';
              dom.innerHTML = `<div class="gmap-info-title">${fakeMarkers[i].title}</div>`;
              // Tạo các info 
              infoWindow[i] = new window.google.maps.InfoWindow({
                content: dom
              });

              // Thêm event khi click vào marker sẽ hiển thị lên info window tương ứng marker đó
              markers[i].addListener("click", () => {
                infoWindow[i].open(map, markers[i]);
              });
          }
      }
    </script>
    ...

Tạo mini map

Để tạo được mini map thì mình sẽ tạo ra một map mới neo ở một element HTML có id="mini-map" với typeMap của minimap sẽ là dạng satellite (mặc định ở map chính đang là dạng roadmap). Tiếp theo sẽ thêm event khi click vào minimap sẽ thay đổi map chính về satellite và ở mini map sẽ thay đổi typeMap về roadmap, cụ thể code như sau

 <!-- Element tạo mini map -->
<div id="mini-map"></div>

// JS tạo mini map mà thêm event
<script>
...
  // Tạo mini map
   const mapMini = new google.maps.Map(document.getElementById("mini-map"), {
      zoomControl: false,
      mapTypeControl: false,
      fullscreenControl: false,
      draggable: false,
      zoom: 10,
      mapTypeId: 'satellite'
   });

   // Đặt giá trị center của mini map lấy center của map lớn
   mapMini.setCenter(map.getCenter());

   // Thêm event khi click mini map thì đổi mapType của 2 map cho nhau
   mapMini.addListener('click', () => {
      const miniType = mapMini.getMapTypeId();
      const newMiniType = miniType === 'satellite' ? 'roadmap' : 'satellite';
      map.setMapTypeId(miniType);
      mapMini.setMapTypeId(newMiniType);
   });

    // Đặt lại giá trị center của mini map khi map lớn thay đổi vị trí
    map.addListener('center_changed', () => {
      mapMini.setCenter(map.getCenter());
    });
</script>

Kết quả sẽ được như hình dứoi đây

Thêm CSS ẩn footer và logo Google

Để ẩn thì chúng ta cần override lại CSS mặc định của Google Map, đoạn code như sau

...
<style>
a[href^="http://maps.google.com/maps"],
a[href^="https://maps.google.com/maps"]{
  display:none !important
}

.gmnoprint a,
.gmnoprint span,
.gm-style-cc {
    display:none;
}

.gmnoprint div {
    background:none !important;
}
</style>