Google Maps API - пример типов карт

Google Maps API поддерживает четыре типа карт:

ROADMAP - отображает обычную карту улиц / дорог (тип карты по умолчанию).
TERRAIN - Отображение обычной карты улиц / дорог на основе информации о местности.
СПУТНИКОВОЕ - Отображение только спутниковых изображений.
HYBRID - Смешанные обычные и спутниковые изображения, отображение улиц / дорог поверх изображений со спутников.

Note
Обычно вы просто используете «ROADMAP» или «HYBRID», не так много вариантов использования для «TERRAIN» и «SATELLITE “.

1. Типы карт

Обратитесь к этомуMapTypeId API reference для всех доступных типов карт.

Вы можете изменить типы карт при создании Карт Google следующим образом:

    var latlng = new google.maps.LatLng(37.4220279, -122.0840677);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP   //change here
    };

    var map = new google.maps.Map(document.getElementById("map_container"),myOptions);

Или измените это динамически как это:

    var map = new google.maps.Map(document.getElementById("map_container"),myOptions);

    map.setMapTypeId(google.maps.MapTypeId.HYBRID);

2. Параметры контроля типов карты

Кроме того, вы можете изменить положение и стиль «контроллера типа карты». Контроллер типа карты представляет собой небольшую рамку или раскрывающееся меню, отображаемое на карте, чтобы пользователь мог динамически изменять тип карты.

Смотрите рисунок:

google map controls

Поддерживаются 3 элемента управления типа карты:

ПО УМОЛЧАНИЮ - по умолчанию параметры отображения зависят от размера окна и других факторов.
DROPDOWN_MENU - Показать параметры в выпадающем меню.
HORIZONTAL_BAR - отображать параметры в виде кнопок и выравнивать по горизонтали.

Настройте стиль управления следующим образом:

    var latlng = new google.maps.LatLng(37.4220279, -122.0840677);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControlOptions: {
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
      }
    };

Кроме того, вы можете настроить, где отображать контроллер типа карты, ссылаясь на все доступные позиции в этомGoogle Map control position reference.

    var latlng = new google.maps.LatLng(37.4220279, -122.0840677);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControlOptions: {
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
     position: google.maps.ControlPosition.BOTTOM_RIGHT
      }
    };

В приведенных выше фрагментах кода элементы управления будут отображаться в правом нижнем углу,

3. Пример типов карт

Полный пример отображения местоположения офиса Google (1600 Amphitheatre Parkway Mountain View, CA 94043) на картах Google:

Тип карты = ГИБРИД
Контроль типа карты = DROPDOWN_MENU
Контрольная позиция типа карты = TOP_CENTER
Добавьте маркер для определения местоположения на карте.



Google Maps API - Map Type

Результат

Загрузите этот пример.

TOC

Google Maps API - пример типов карт