Задаем свой стиль для карты с использованием API Google Maps v3

Продолжаю знакомить Вас с новыми возможностями в API Карт Google v3.

В этой версии появилась возможность изменения стандартного вида карт Google, путем изменения визуального отображения таких элементов, как дороги, парки и населенные пункты с использованием различных стилей отображения, чем используемые в типе карта по умолчанию.

За это отвечает специальная функция StyledMapType

Конструктор функции StyledMapType () принимает массив пар значений MapTypeStyles, каждая из которых содержит селектор, указывающий на конкретный элемент карты featureType и стиль отображения для данного элемента stylers.

Полный список доступных элементов

Некоторые элементы имеют сложную структуру, например улицы — road, геометрия (geometry) и обозначение (labels).

Для них задаются специальная опция ElementType, которая может принимать три значения:

— для всех all;
— геометрия geometry;
— обозначение labels.

Параметры для задания стиля отображения stylers:

hue — цвет, задается значение цвета в виде шестнадцатеричной строки ( "#ff0000" — красный цвет);

lightness — яркость, значения с плавающей точкой между -100 и 100, указывает на изменение в процентах яркости элемента, отрицательные значения – темнее (- 100 — черный), а положительные — светлее (100 — белый);

saturation — насыщенность, также от -100 до 100, указывает на процентное изменение интенсивности основного цвета;

gamma — контрастность, значения от 0,01 до 10,0, где 1,0 – значение по умолчанию. Значения <1 увеличивают контрастность, в то время как значения > 1 уменьшить контрастность.

inverse_lightness — если true, то не менять существующую величину яркости элемента;

visibility — видимость (on, off, или simplified), показывает отображать или нет элемент на карте, если simplified — упрощение видимости, на карте автоматически упрощается вид элементов, например для дорог — не показываются некоторые дороги.

Пример -1

<!DOCTYPE html> 
<html> 
<head> 
<title>Google Maps JavaScript API v3 пример: Styled MapTypes</title> 
<link rel="nofollow" href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  
<script> 
 
var map;
var nnovgorod = new google.maps.LatLng(56.316537, 43.998779);
 
var MY_MAPTYPE_ID = 'mystyle';
 
function initialize() {
 
  var stylez =  [
  {
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [
      { visibility: "on" },
      { hue: "#ff0000" }
    ]
  },{
    featureType: "water",
    elementType: "geometry",
    stylers: [
      { visibility: "on" },
      { hue: "#0800ff" },
      { lightness: -41 }
    ]
  }
];
 
  var mapOptions = {
    zoom: 12,
    center: nnovgorod,
    mapTypeControlOptions: {
       mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
    },
    mapTypeId: MY_MAPTYPE_ID
  };
 
  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
 
  var styledMapOptions = {
    name: "Мой стиль"
  };
 
  var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
 
  map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);
}
</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas" style="width: 800px; height: 600px;"></div> 
</body> 
</html>

В начале, мы задаем название для нового типа карты

var MY_MAPTYPE_ID = ‘mystyle’;

После этого задаем стили отображения для двух элементов road.highway и water

var stylez = [
{
   featureType: "road.highway",
   elementType: "geometry",
   stylers: [
      { visibility: "on" },
      { hue: "#ff0000" }
   ]
},{
   featureType: "water",
   elementType: "geometry",
   stylers: [
      { visibility: "on" },
      { hue: "#0800ff" },
      { lightness: -41 }
   ]
  }
];

Для элемента road.highway (шоссейных дорог) будем задавать стиль для геометрии, стиль видимый, красного цвета.

Для элемента water (водных объектов) задается стиль для геометрии, цвет #0800ff и величина яркости -41.

После этого определяем параметры для нашей карты

var mapOptions = {
zoom: 12,
center: nnovgorod,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};

Определяем нашу карту

map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);

И название для нашего стиля

var styledMapOptions = {
name: "Мой стиль"
};

Определяем новый тип для карты и добавляем его

var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);

Посмотреть пример в действии

Пример — 2: Задаем стиль отображения для карты

Посмотреть пример в действии

Существует специальный сервис для создания стилей отображения карты
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Хотя сервис не на русском пользоваться им понятно.

В разделе Feature type выбирается элемент для установки стиля

Раздел Element type служит для выбора применять стиль ко всему элементу, геометрии или обозначению.

В разделе Stylers настраиваются параметры отображения для стиля.

Если нужен еще дополнительный стиль для карты, необходимо нажать кнопку Add Style.

Удалить добавленный стиль – Reset Style.

Нажав на кнопку Show JSON, получаем готовый код для определения стилей отображения карты.

Задаем свой стиль для карты с использованием API Google Maps v3

Задаем свой стиль для карты с использованием API Google Maps v3: 1 комментарий

Добавить комментарий Отменить ответ