Question

I am using Google Maps API V3, I would like to know how I can change the position of the elements (shown in picture http://www.pikky.net/uploads/d6964cfad0bb97cc3ada7852df260a715234d69a.png) when the user is INSIDE Street View.
Thanks,
Mirko

Answer 1

You achieve this by defining your StreetViewPanoramaOptions to a StreetViewPanorama object that you will initialize to your map variable when declaring the map options. It’s in the StreetViewPanoramaOptions that you can determine the positions of the controls for when you’re in the street view. (Refer to this document for more info https://developers.google.com/maps/documentation/javascript/reference#StreetViewPanoramaOptions ). Here is a snippet on how to approach this. (Note: this should all be done in your initialize() function prior to initializing your map variable).

First we will declare a variable for StreetViewPanoramaOptions and change options as we desire:

    var panoramaOptions = {
        addressControlOptions : { position : google.maps.ControlPosition.BOTTOM_CENTER },
        zoomControlOptions : { position : google.maps.ControlPosition.TOP_RIGHT},
        enableCloseButton : true,
        visible: false //set to false so streetview is not triggered on the initial map load
    };

The next step is to declare a StreetViewPanorama object that is set to the container/div of the map with the StreetViewPanoramaOptions from above:

    var panorama = new  google.maps.StreetViewPanorama(document.getElementById("map_canvas"), panoramaOptions);

Lastly, we declare the map options and set the map variable with the map options like we would normally do. Except, in the map options we set the streetView option to the panorama variable:

    var mapOptions = {
        center: new google.maps.LatLng(42.345573,-71.098326),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetView : panorama //this is where we set the panorama object to the map
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

Refer to this source for how to position controls in the map div ( https://developers.google.com/maps/documentation/javascript/controls#ControlPositioning )