How can I put a Street View button on a fairly typical Google Map so that it is inline with the standard Map/Satellite/Hybrid buttons in the top right corner? I've seen one example of this that I can't find any longer. So, I know it's possible.

How can I put a Street View button on a fairly typical Google Map so that it is inline with the standard Map/Satellite/Hybrid buttons in the top right corner? I've seen one example of this that I can't find any longer. So, I know it's possible.

• javascript
• google-maps

Share Improve this question Follow edited Aug 6, 2015 at 11:57 user2314737 29.5k2020 gold badges107107 silver badges123123 bronze badges asked Mar 3, 2009 at 14:47 ssorrrellssorrrell 67911 gold badge88 silver badges1919 bronze badges 2

• Isn't that the way it used to appear on the Google site? Maybe if you use the old API instead of the current one, you'll get that behavour? – Paul Tomblin Commented Mar 3, 2009 at 14:54
• Using the old API isn't an option. – ssorrrell Commented Apr 29, 2010 at 13:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Yes indeed, one can specify control positions in the map's options--look for control positioning in the online docs.

How to specify Google maps controls positions

For positioning the street view control in the top right corner add

  streetViewControlOptions: {
    position: google.maps.ControlPosition.TOP_RIGHT
  }

to your map's options.

Check this demo (that uses the Google maps API version 3):

var myLatlng = new google.maps.LatLng(-33, 151);
var myOptions = {
  center: myLatlng,
  zoom: 5,
  streetViewControl: true,
  streetViewControlOptions: {
    position: google.maps.ControlPosition.TOP_RIGHT
  }
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

#map_canvas {
  width: 300px;
  height: 200px;
}

<script type="text/javascript" src="https://maps.googleapis./maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>

Here's an another example for control positioning in the official documentation.

Control placement identifiers

These are all possible positions for Google maps controls (from TOP_LEFT to BOTTOM_RIGHT):

  +----------------+ 
  + TL    TC    TR + 
  + LT          RT + 
  +                + 
  + LC          RC + 
  +                + 
  + LB          RB + 
  + BL    BC    BR + 
  +----------------+

For a full list of positions and how they work see https://developers.google./maps/documentation/javascript/3.exp/reference#ControlPosition

Changing a control position programmatically

You can also change the position dynamically after creating the map using the SetOptions method of the google.maps.Map class. In this example I create a map as above with streetViewControl in position TOP_RIGHT and then change it to LEFT_BOTTOM:

var myLatlng = new google.maps.LatLng(-33, 151);
var myOptions = {
  center: myLatlng,
  zoom: 5,
  streetViewControl: true,
  streetViewControlOptions: {
    position: google.maps.ControlPosition.TOP_RIGHT
  }
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// now change position to LEFT_BOTTOM changing streetViewControlOptions
// with setOptions
map.setOptions({
  streetViewControlOptions: {
    position: google.maps.ControlPosition.LEFT_BOTTOM
  }
});

#map_canvas {
  width: 300px;
  height: 200px;
}

<script type="text/javascript" src="https://maps.googleapis./maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>