Show Google-map with this kind of minimap in left corner

Question

Currently I have a map where people can also enter streetview-mode. I'd like to have a minimap in the lower-left-corner which shows the 'little man' and the direction you're looking. For illustration I added a screenshot.

The code I use for creating the map is pretty basic and I'm not a pro in this area. Hope someone can point out how to add such a minimap in my current map.

        function initialize() {

            var latlng = new google.maps.LatLng(52.207206, 4.866782);
            var myOptions = {
                zoom: GetPrevZoom(),
                mapTypeId: "OSM",
                streetViewControl: true,
                gestureHandling: "greedy",
                zoomControl: false,
                mapTypeControlOptions: {
                    mapTypeIds: [
                        "OSM",
                        google.maps.MapTypeId.SATELLITE,
                        google.maps.MapTypeId.ROADMAP
                    ]
                }

            };
            map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

            map.mapTypes.set("OSM", new google.maps.ImageMapType({
                getTileUrl: function (coord, zoom) {
                    return "https://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
                },
                tileSize: new google.maps.Size(256, 256),
                name: "OpenStreetMap",
                maxZoom: 19
            }));

            map.addListener('zoom_changed', function () {

                sessionStorage.setItem('zoomlevel', map.getZoom());

            });

            oms = new OverlappingMarkerSpiderfier(map, { markersWontMove: true, markersWontHide: true, keepSpiderfied: true });
            var iw = new google.maps.InfoWindow();

            map.overlayMapTypes.push(null);

        }

        function GetPrevZoom() {

            let data = sessionStorage.getItem('zoomlevel');

            return 18;

        }

What do I need to add here to get a minimap?

Thanks, Ferdy

Answer 1

Thanks for your response. However it errors out at the getStreetView-function. My complete code below.

       function initialize() {

       var latlng = new google.maps.LatLng(52.207206, 4.866782);
       var myOptions = {
           zoom: GetPrevZoom(),
           mapTypeId: "OSM",
           streetViewControl: true,
           gestureHandling: "greedy",
           zoomControl: false,
           mapTypeControlOptions: {
               mapTypeIds: [
                   "OSM",
                   google.maps.MapTypeId.SATELLITE,
                   google.maps.MapTypeId.ROADMAP
               ]
           }

       };
       map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

       map.mapTypes.set("OSM", new google.maps.ImageMapType({
           getTileUrl: function (coord, zoom) {
               return "https://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
           },
           tileSize: new google.maps.Size(256, 256),
           name: "OpenStreetMap",
           maxZoom: 19
       }));

       map.addListener('zoom_changed', function () {

           sessionStorage.setItem('zoomlevel', map.getZoom());

       });

       oms = new OverlappingMarkerSpiderfier(map, { markersWontMove: true, markersWontHide: true, keepSpiderfied: true });
       var iw = new google.maps.InfoWindow();

       map.overlayMapTypes.push(null);

   }

   var streetView = map.getStreetView();

   var miniMapDiv = document.createElement("div");
   miniMapDiv.style.width = "150px";
   miniMapDiv.style.height = "150px";
   miniMapDiv.style.position = "absolute";
   miniMapDiv.style.bottom = "10px";
   miniMapDiv.style.left = "10px";
   miniMapDiv.style.border = "2px solid black";
   miniMapDiv.style.zIndex = "5";
   document.getElementById("map-canvas").appendChild(miniMapDiv);

   var miniMapOptions = {
       zoom: 16,
       center: latlng,
       disableDefaultUI: true,
       draggable: false,
       scrollwheel: false,
       mapTypeId: google.maps.MapTypeId.ROADMAP
   };

   var miniMap = new google.maps.Map(miniMapDiv, miniMapOptions);
   var pegmanMarker = new google.maps.Marker({
       position: latlng,
       map: miniMap,
       icon: {
           url: "https://maps.gstatic.com/tactile/pegman_v4/pegman.png",
           scaledSize: new google.maps.Size(20, 40)
       }
   });

   streetView.addListener("position_changed", function () {
       var pos = streetView.getPosition();
       miniMap.setCenter(pos);
       pegmanMarker.setPosition(pos);
   });

   streetView.addListener("pov_changed", function () {
       pegmanMarker.setIcon({
           url: "https://maps.gstatic.com/tactile/pegman_v4/pegman.png",
           scaledSize: new google.maps.Size(20, 40),
           rotation: streetView.getPov().heading
       });
   });

Can you tell whats happening here?

Thanks again,

Ferdy