Question

I’m using the Google Map V3 Javascrpt API to embed a Google Map. When a user goes into street view on the embedded map how do you move the rotation controls to the right side. I’ve tried setting up these options when creating the map:

rotateControlOptions: {
    position: google.maps.ControlPosition.RIGHT_CENTER
}   

However, when in street view the rotate controls remain on the left? Is there a way to position the rotate controls when in street view to the right side?

Answer 1

Yes, you can place the controls in other positions, but the solution is a little tricky.

You can set the streetView controls position in a StreetViewPanoramaOptions. The problem is that you can pass the options object to the StreetViewPanorama object only in its constructor. Therefore you have to create a default StreetViewPanorama object, that is not visible (otherwise the streetview panorama would be loaded instead of the map). The StreetViewPanoramaOptions would be:

var streetViewOptions = {
   panControl: true,
   panControlOptions: {
      position: google.maps.ControlPosition.TOP_RIGHT
   },
   visible: false
};

Create the StreetViewPanorama in the same div as the map:

var street = new google.maps.StreetViewPanorama(document.getElementById('map_canvas'), streetViewOptions);

Add streetView option to the map options:

var myOptions = {
   zoom: 8,
   center: myLatlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   streetView: street
}

Create the map:

var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);