Widget:Map

<iframe width="100%" height="450" style="border:0" loading="lazy" allowfullscreen src="https://www.google.com/maps/embed/v1/view?zoom=17&center=44.4596%2C-93.1555&key=AIzaSyAX0HuXLcDXyXYtYDlAlbMYDu6Xe_TdRDc"></iframe>

<script> let map; async function initMap() {

   var styledMapType = new google.maps.StyledMapType(
 [
 {
   "elementType": "geometry",
   "stylers": [
     {
       "color": "#ebe3cd"
     }
   ]
 },
 {
   "elementType": "labels.text",
   "stylers": [
     {
       "visibility": "off"
     }
   ]
 },
 {
   "elementType": "labels.text.fill",
   "stylers": [
     {
       "color": "#523735"
     }
   ]
 },
 {
   "elementType": "labels.text.stroke",
   "stylers": [
     {
       "color": "#f5f1e6"
     }
   ]
 },
 {
   "featureType": "administrative",
   "elementType": "geometry.stroke",
   "stylers": [
     {
       "color": "#c9b2a6"
     }
   ]
 },
 {
   "featureType": "administrative.land_parcel",
   "elementType": "geometry.stroke",
   "stylers": [
     {
       "color": "#dcd2be"
     }
   ]
 },
 {
   "featureType": "administrative.land_parcel",
   "elementType": "labels.text.fill",
   "stylers": [
     {
       "color": "#ae9e90"
     }
   ]
 },
 {
   "featureType": "landscape.natural",
   "elementType": "geometry",
   "stylers": [
     {
       "color": "#dfd2ae"
     }
   ]
 },
 {
   "featureType": "poi",
   "elementType": "geometry",
   "stylers": [
     {
       "color": "#dfd2ae"
     }
   ]
 },
 {
   "featureType": "poi",
   "elementType": "labels.text.fill",
   "stylers": [
     {
       "color": "#93817c"
     }
   ]
 },
 {
   "featureType": "poi.park",
   "elementType": "geometry.fill",
   "stylers": [
     {
       "color": "#a5b076"
     }
   ]
 },
 {
   "featureType": "poi.park",
   "elementType": "labels.text.fill",
   "stylers": [
     {
       "color": "#447530"
     }
   ]
 },
 {
   "featureType": "poi.school",
   "elementType": "geometry",
   "stylers": [
     {
       "visibility": "off"
     }
   ]
 },
 {
   "featureType": "road",
   "elementType": "geometry",
   "stylers": [
     {
       "color": "#b84254"
     }
   ]
 },
 {
   "featureType": "road.arterial",
   "elementType": "geometry",
   "stylers": [
     {
       "color": "#fdfcf8"
     }
   ]
 },
 {
   "featureType": "road.highway",
   "elementType": "geometry",
   "stylers": [
     {
       "color": "#f8c967"
     }
   ]
 },
 {
   "featureType": "road.highway",
   "elementType": "geometry.stroke",
   "stylers": [
     {
       "color": "#e9bc62"
     }
   ]
 },
 {
   "featureType": "road.highway.controlled_access",
   "elementType": "geometry",
   "stylers": [
     {
       "color": "#e98d58"
     }
   ]
 },
 {
   "featureType": "road.highway.controlled_access",
   "elementType": "geometry.stroke",
   "stylers": [
     {
       "color": "#db8555"
     }
   ]
 },
 {
   "featureType": "road.local",
   "elementType": "labels.text.fill",
   "stylers": [
     {
       "color": "#806b63"
     }
   ]
 },
 {
   "featureType": "transit.line",
   "elementType": "geometry",
   "stylers": [
     {
       "color": "#dfd2ae"
     }
   ]
 },
 {
   "featureType": "transit.line",
   "elementType": "labels.text.fill",
   "stylers": [
     {
       "color": "#8f7d77"
     }
   ]
 },
 {
   "featureType": "transit.line",
   "elementType": "labels.text.stroke",
   "stylers": [
     {
       "color": "#ebe3cd"
     }
   ]
 },
 {
   "featureType": "transit.station",
   "elementType": "geometry",
   "stylers": [
     {
       "color": "#dfd2ae"
     }
   ]
 },
 {
   "featureType": "water",
   "elementType": "geometry.fill",
   "stylers": [
     {
       "color": "#b9d3c2"
     }
   ]
 },
 {
   "featureType": "water",
   "elementType": "labels.text.fill",
   "stylers": [
     {
       "color": "#92998d"
     }
   ]
 }

],

 {name: 'Styled Map'});

   const { Map } = await google.maps.importLibrary("maps");
   map = new Map(document.getElementById("map"), {
       center: { lat: -34.397, lng: 150.644 },
       zoom: 8,
   });

   map.mapTypes.set('styled_map', styledMapType);
   map.setMapTypeId('styled_map');

} </script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAX0HuXLcDXyXYtYDlAlbMYDu6Xe_TdRDc&callback=initMap&libraries=&v=weekly" async></script>

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&key=AIzaSyAX0HuXLcDXyXYtYDlAlbMYDu6Xe_TdRDc&map_id=20f664f6606e1433cbbe4077" />

<iframe width="100%" height="75vw" style="border:0" loading="lazy" allowfullscreen src="https://www.google.com/maps/embed/v1/view?zoom=17&center=44.4596%2C-93.1555&key=AIzaSyAX0HuXLcDXyXYtYDlAlbMYDu6Xe_TdRDc&style=element:geometry%7Ccolor:0xebe3cd&style=element:labels.text%7Cvisibility:off&style=element:labels.text.fill%7Ccolor:0x523735&style=element:labels.text.stroke%7Ccolor:0xf5f1e6&style=feature:administrative%7Celement:geometry.stroke%7Ccolor:0xc9b2a6&style=feature:administrative.land_parcel%7Celement:geometry.stroke%7Ccolor:0xdcd2be&style=feature:administrative.land_parcel%7Celement:labels.text.fill%7Ccolor:0xae9e90&style=feature:landscape.natural%7Celement:geometry%7Ccolor:0xdfd2ae&style=feature:poi%7Celement:geometry%7Ccolor:0xdfd2ae&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x93817c&style=feature:poi.park%7Celement:geometry.fill%7Ccolor:0xa5b076&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x447530&style=feature:poi.school%7Celement:geometry%7Cvisibility:off&style=feature:road%7Celement:geometry%7Ccolor:0xb84254&style=feature:road.arterial%7Celement:geometry%7Ccolor:0xfdfcf8&style=feature:road.highway%7Celement:geometry%7Ccolor:0xf8c967&style=feature:road.highway%7Celement:geometry.stroke%7Ccolor:0xe9bc62&style=feature:road.highway.controlled_access%7Celement:geometry%7Ccolor:0xe98d58&style=feature:road.highway.controlled_access%7Celement:geometry.stroke%7Ccolor:0xdb8555&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0x806b63&style=feature:transit.line%7Celement:geometry%7Ccolor:0xdfd2ae&style=feature:transit.line%7Celement:labels.text.fill%7Ccolor:0x8f7d77&style=feature:transit.line%7Celement:labels.text.stroke%7Ccolor:0xebe3cd&style=feature:transit.station%7Celement:geometry%7Ccolor:0xdfd2ae&style=feature:water%7Celement:geometry.fill%7Ccolor:0xb9d3c2&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x92998d"></iframe>