В первой статье этой серии — Google Maps API 3 — Основы мы обсуждали то, как создать простую карту с помощью Google Maps API v3. В этой статье мы изучим возможные параметры при создании карты и посмотрим, как можно изменить внешний вид и поведение карты с их помощью.
Как мы видели в предыдущей статье в параметрах для инициализации карты должно присутствовать три обязательных свойства: center — координаты центра карты, zoom — уровень увеличения, mapTypeId — тип создаваемой карты.
Если на счёт первых двух свойств никаких вопросов не возникает, то последнее, mapTypeId, нуждается в небольшом объяснении. Это свойство сообщает API, какой тип карты нужно отображать в зависимости от используемой константы. Существует несколько типов карт на выбор и все они находятся в пространстве имён google.maps.MapTypeId. Вот они:
— ROADMAP. Это нормальная карта.
— SATELLITE. Вид со спутника.
— HYBRID. Вид со спутника с дорогами и значками сверху.
— TERRAIN. Карта отображается с рельефом, растительностью и т.д.
Давайте для примера создадим карту с видом со спутника:
// Создаём объект с параметрами для инициализации карты
var params = {
zoom: 8,
center: new google.maps.LatLng(36.2, 45.3),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
// Вызываем конструктор карты
var mapObject = new google.maps.Map(document.getElementById('container'), params);Этот код создаст карту, которая будет выглядеть примерно так:
Обратите внимание, что некоторые элементы пользовательского интерфейса отображаются на карте по умолчанию. В старой версии Google Maps API Вам нужно было явно указать какие элементы интерфейса должны отображаться. В новой версии всё наоборот — нужно указать то, чего мы видеть не хотим.
Значение по умолчанию — false. Устанавливая его в true, Вы отключите пользовательский интерфейс по умолчанию. То есть контроль зума и выбор типа карты будут недоступны. Однако Вы можете активировать их по отдельности.
С помощью этого свойства можно контролировать, будет ли отображаться переключатель типа карты. Этот переключатель расположен в правом верхнем углу карты. Установите его в true, чтобы показать и в false, чтобы скрыть. Значение по умолчанию — true.
C помощью этого свойства можно изменять вид переключателя. Оно может принимать одно из этих значений, которые находятся в пространстве имён google.maps.MapTypeControlStyle:
— DEFAULT. Значение по умолчанию, зависит от размера окна и возможно других факторов.
— HORIZONTAL_BAR. Будет отображаться стандартная панель.
— DROPDOWN_MENU. Переключатель примет вид выскакивающего списка. Такой вид переключателя полезен, когда размеры окна небольшие или Вам необходимо экономить пространство по каким–либо причинам.
Если, например, Вам нужно отобразить этот переключатель выскакивающим списком, то сделать это можно вот так:
// Создаём объект с параметрами для инициализации карты
var params = {
zoom: 7,
center: new google.maps.LatLng(36.2, 45.3),
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};Обратите внимание, что этот параметр — объект с одним свойством style, которое принимает значение одной из констант. На первый взгляд такая конструкция может показаться немного громоздкой, но на самом деле всё сделано с умом. Это позволит добавлять новые свойства в новых релизах API.
Это свойство отвечает за отображение навигации. Эти элементы управления картой обычно находятся в верхней левой части карты, с помощью которых можно изменять зум и перемещаться.
Существует четыре варианта для отображения навигации. Все они находятся в пространстве имён google.maps.NavigationControlStyle. Подробнее:
— DEFAULT. Если установлена константа, то стиль отображения навигации будет зависеть от размера карты и других факторов.
— SMALL. Миниатюрная навигация, которая позволит Вам только изменять зум.
— ANDROID. Специальная навигация для смартфонов на платформе Android.
— ZOOM_PAN. Полноценная навигация, которая позволит изменять зум и перемещаться по карте.
Вот пример использования полноценной навигации:
var params = {
zoom: 7,
center: new google.maps.LatLng(36.2, 45.3),
mapTypeId: google.maps.MapTypeId.SATELLITE,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
};Это свойство определяет, будет ли отображаться информация о текущем масштабе. Установите его в true, чтобы показывать информацию или в false, чтобы скрыть. Этот элемент не отображается по умолчанию, так что если он Вам нужен, то нужно это явно указать. Он, как правило, расположен в левом нижнем углу карты.
Существует несколько горячих клавиш для управления картой. Клавиши курсора для перемещения и +/– для изменения зума. По умолчанию значение установлено в true, то есть горячие клавиши включены.
Контейнер карты — это HTML элемент, в котором она находится. Обычно этому элементу присваивается id=”map” или что–то в этом роде. Существует несколько свойств, которое контролируют его поведение.
Значение по умолчание — false, то есть контент контейнера подчищается.
Этот цвет будет отображаться на фоне контейнера в те моменты, когда карта не будет успевать подгрузиться.
По умолчанию — false. Если установить в true, то карта не будет делать автоматическую проверку для изменения размера.
Наконец, есть несколько свойств для управления курсором. К ним относятся:
Устанавливает имя или URL–адрес курсора, который отображается на перетаскиваемом объекте.
Устанавливает имя или URL–адрес курсора, который отображается при перетаскивании объекта.
В этом примере Вы сможете поиграться с некоторыми свойствами карты, и посмотреть как их изменение влияет на её внешний вид:
В этой статье мы рассмотрели параметры карты, доступные при инициализации. Эти параметры влияют на внешний вид и поведение карты. Есть и другие методы, которые можно использовать для изменения этих параметров, но мы их рассмотрим немного позже. В следующей статье мы научимся работать с маркерами в Google Maps.