How to show the bottom left minimap widget in streetview (Google Map JS API)

Question

Anyone knows how to show the bottom left minimap on a custom streetview called through the Google Maps JS API?

Answer 1

I faced the same problem a while ago and ended up doing a custom control inside the streetview panorama. It seems that there isn't a easy way to do this kind of thing with the API.

In this codepen: http://codepen.io/chmartinez/pen/pJLVRK you'll see a map that allows you to use streetview. And once you use it, the streetview panorama will load its controls, including a custom control which is a new map with a red marker that let's you do most of the things that you could do with the pegman in maps.google.com.

The "cool" parts are:

// this is the main map (which will include a streetview panorama)
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// this is the panorama
var panorama = new google.maps.StreetViewPanorama(document.getElementById('map-canvas'), panoramaOptions);
// this is the DOM element that will "contain" our custom control
var controlDiv = document.getElementById("map");

// this is the map inside the custom control
var mapControl = new google.maps.Map(controlDiv, {
    zoom: 16,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    draggable: true,
    mapTypeControl: false,
    zoomControl: false,
    rotateControl: false,
    scaleControl: false,
    panControl: false,
    streetViewControl: false
});
// setting the custom control in the panorama
panorama.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(controlDiv);
// set the panorama as streetview of the 'main' map 
map.setStreetView(panorama);

After that, you just need to add stuff to the custom control (I've added a marker and a marker shadow. You could also change the map look&feel, set new controls (control-ception) and more!), set the listeners you want and that's it.

Hope it helps!