Why can't I move the addressControl in my Google map? - google-maps-api-3

Question

Here is the mapOptions of my Google Map.
var mapOptions = {
addressControlOptions: {
streetViewAddressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
}
},
center: new google.maps.LatLng(40.29343234, -111.87488245),
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl: true,
mapTypeControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
overviewMapControl: true,
panControl: true,
scaleControl: true,
streetViewControl: true,
zoom: 18,
zoomControl: true
};
When I am at the regular Map view, everything is in the proper position. When I use the pegman to go to the streetView, my streetViewAddressControl is at the top right. I know that I must have my options set up wrong. What do I need to change to make this work?

Answer 1

You can't set this controlOption with the map-options, you must first create the map, then access the StreetView via getStreetView() and set the options via setOptions()
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.29343234, -111.87488245),
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl: true,
mapTypeControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
overviewMapControl: true,
panControl: true,
scaleControl: true,
streetViewControl: true,
zoom: 18,
zoomControl: true
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
map.getStreetView().setOptions({
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
height: 100%;
margin: 0;
padding: 0
}
<script src="https://maps.googleapis.com/maps/api/js?v=3&.js"></script>
<div id="map_canvas"></div>

Answer 2

Use Control Positioning, most of the control options contain a position property of type ControlPosition which indicates where on the map to place the control. Positioning of these controls is not absolute. Instead, the API will lay out the controls intelligently by flowing them around existing map elements, or other controls, within given constraints.
The following example shows a simple map with all controls enabled, in different positions.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: -28.643387, lng: 153.612224},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
fullscreenControl: true
});
}
You may do Custom Controls, check this document oh how to do that: https://developers.google.com/maps/documentation/javascript/controls#CustomControls