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

Thứ Ba, 24/11/2020

Tram Ho

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

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

    html<span class="token punctuation">,</span>
    body <span class="token punctuation">{</span>
      height<span class="token operator">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
      margin<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
      padding<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
      position<span class="token operator">:</span> relative<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">&gt;</span>

<!DOCTYPE html>

<html>

<head>

<title>Mini Google Map</title>

<script

src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap"

defer

></script>

</head>

<body>

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

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

         <span class="token comment">// Tạo mảng markers và mảng infoWindow</span>
         <span class="token keyword">const</span> markers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
         <span class="token keyword">const</span> infoWindow <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

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

              <span class="token comment">// Tạo HTML cho content info window </span>
              <span class="token keyword">const</span> dom <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
              dom<span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">'gmap-info-window'</span><span class="token punctuation">;</span>
              dom<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;div class="gmap-info-title"&gt;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>fakeMarkers<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/div&gt;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
              <span class="token comment">// Tạo các info </span>
              infoWindow<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">window<span class="token punctuation">.</span>google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>InfoWindow</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                content<span class="token operator">:</span> dom
              <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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

...

zoom: 8, // set zoom default là 8 (maximum là 20)

});

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

 <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> Element tạo mini map <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"mini-map"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

<span class="token comment">// JS tạo mini map mà thêm event</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token operator">...</span>
  <span class="token comment">// Tạo mini map</span>
   <span class="token keyword">const</span> mapMini <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>maps<span class="token punctuation">.</span>Map</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"mini-map"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      zoomControl<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      mapTypeControl<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      fullscreenControl<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      draggable<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      zoom<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
      mapTypeId<span class="token operator">:</span> <span class="token string">'satellite'</span>
   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

   <span class="token comment">// Đặt giá trị center của mini map lấy center của map lớn</span>
   mapMini<span class="token punctuation">.</span><span class="token function">setCenter</span><span class="token punctuation">(</span>map<span class="token punctuation">.</span><span class="token function">getCenter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

   <span class="token comment">// Thêm event khi click mini map thì đổi mapType của 2 map cho nhau</span>
   mapMini<span class="token punctuation">.</span><span class="token function">addListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> miniType <span class="token operator">=</span> mapMini<span class="token punctuation">.</span><span class="token function">getMapTypeId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> newMiniType <span class="token operator">=</span> miniType <span class="token operator">===</span> <span class="token string">'satellite'</span> <span class="token operator">?</span> <span class="token string">'roadmap'</span> <span class="token operator">:</span> <span class="token string">'satellite'</span><span class="token punctuation">;</span>
      map<span class="token punctuation">.</span><span class="token function">setMapTypeId</span><span class="token punctuation">(</span>miniType<span class="token punctuation">)</span><span class="token punctuation">;</span>
      mapMini<span class="token punctuation">.</span><span class="token function">setMapTypeId</span><span class="token punctuation">(</span>newMiniType<span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// Đặt lại giá trị center của mini map khi map lớn thay đổi vị trí</span>
    map<span class="token punctuation">.</span><span class="token function">addListener</span><span class="token punctuation">(</span><span class="token string">'center_changed'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      mapMini<span class="token punctuation">.</span><span class="token function">setCenter</span><span class="token punctuation">(</span>map<span class="token punctuation">.</span><span class="token function">getCenter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

// JS tạo mini map mà thêm event

...

// 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', () => {

});

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

<span class="token operator">...</span>
<span class="token operator">&lt;</span>style<span class="token operator">&gt;</span>
a<span class="token punctuation">[</span>href<span class="token operator">^=</span><span class="token string">"http://maps.google.com/maps"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
a<span class="token punctuation">[</span>href<span class="token operator">^=</span><span class="token string">"https://maps.google.com/maps"</span><span class="token punctuation">]</span><span class="token punctuation">{</span>
  display<span class="token operator">:</span>none <span class="token operator">!</span>important
<span class="token punctuation">}</span>

<span class="token punctuation">.</span>gmnoprint a<span class="token punctuation">,</span>
<span class="token punctuation">.</span>gmnoprint span<span class="token punctuation">,</span>
<span class="token punctuation">.</span>gm<span class="token operator">-</span>style<span class="token operator">-</span>cc <span class="token punctuation">{</span>
    display<span class="token operator">:</span>none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token punctuation">.</span>gmnoprint div <span class="token punctuation">{</span>
    background<span class="token operator">:</span>none <span class="token operator">!</span>important<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>

...

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

Các bạn có thể xem kết quả ở link sau đây

Kết luận

Mong rằng bài viết có thể giúp ích được cho các bạn đang tìm hiểu về Google Map API, nếu có câu hỏi hoặc góp ý nào hãy viết dưới comment nhé, thanks!

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

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

Giới thiệu

Tạo Map từ Google Map API

Tạo markers

Tạo mini map

Thêm CSS ẩn footer và logo Google

Kết luận

Giá Bitcoin hôm nay 26/1: Bitcoin trượt dốc

YouTube mở đường cho sinh viên học và tích luỹ tín chỉ đại học

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript