Create a map with custom styles and two div elements for Google Maps using JavaScript API

by Wolf

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>JS Maps</title>
    <style>
/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
.map {
  height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="map2" class="map"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly&language=en"
      defer
      ></script>
    <script>
function initMap() {
  const myLatLng = { lat: 47.3769 , lng: 8.5417 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: myLatLng,
    styles: [
      {
        "featureType": "poi",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }
    ],
    mapTypeId: "hybrid"
  });

}

    </script>
  </body>
</html>