Размещение кнопки просмотра улиц на карте Google

Question

Как я могу поместить кнопку Просмотр улиц на довольно типичную карту Google, чтобы она находилась на линии со стандартными кнопками Карта / Спутник / Гибрид в правом верхнем углу? Я видел один пример этого, который я больше не могу найти. Итак, я знаю, что это возможно.

Answer 1

Да, действительно, можно указать контрольные позиции в опциях карты - ищите контрольное положение в онлайн-документах .

Как указать позиции управления картами Google

Для позиционирования элемента управления видом на улицу в верхнем правом углу добавьте

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

к параметрам вашей карты.

Проверьте это демо (в котором используется API карт Google версии 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.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>

Вот еще один пример позиционирования управления в официальной документации.

Управление идентификаторами размещения

Это все возможные позиции для элементов управления картами Google (от TOP_LEFT до BOTTOM_RIGHT):

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

Полный список позиций и как они работают см. https://developers.google.com/maps/documentation/javascript/3.exp/reference#ControlPosition

Программное изменение положения управления

Вы также можете динамически изменять положение после создания карты, используя метод SetOptions класса google.maps.Map . В этом примере я создаю карту, как указано выше, с streetViewControl в положении TOP_RIGHT, а затем меняю ее на 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.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>