GoogleマップでaddressControlを移動できないのはなぜですか？

Question

私のGoogleマップはmapOptionsです。

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 
}; 

通常のマップビューでは、すべてが適切な位置にあります。 pegmanを使用してstreetViewに行くと、私のstreetViewAddressControlは右上にあります。私はオプションを間違って設定しなければならないことを知っています。この仕事をするためには何を変更する必要がありますか？

Answer 1

Control Positioningを使用すると、ほとんどのコントロールオプションには、コントロールを配置するマップの場所を示すControlPositionタイプのpositionプロパティが含まれています。これらのコントロールの配置は絶対的なものではありません。代わりに、APIは、既存のマップ要素または他のコントロールの周りに、指定された制約内でコントロールをインテリジェントに配置することによって、コントロールをレイアウトします。

次の例は、すべてのコントロールが有効になっており、異なる位置にある単純なマップを示しています。

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 
}); 
} 

あなたは、カスタムコントロールを行うことを行う方法ああ、この文書をチェックすることがあります。あなたがマップオプションで、このcontrolOptionを設定することはできませんhttps://developers.google.com/maps/documentation/javascript/controls#CustomControls

Answer 2

には、最初にアクセスした後、マップを作成する必要があります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>

経由 getStreetView()経由ストリートビューと設定オプション