Mini Google Map

by davidluu9x

HTML

<!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>
    <div id="map"></div>
    <div id="mini-map"></div>
    <script>
      function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: -33.91721, lng: 151.2263 },
          zoom: 16,
          mapTypeControl: false,
        });
        
         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...

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */