Матвей Земсков

Заметки веб-мастера

Воскресенье, 10 марта 2013 17:06

Размещаем стилизованную карту Google на своем сайте

Оцените материал
(7 голосов)

Однажды, просматривая страницу с контактами на одном из сайтов, я обратил внимание на то, что карта с расположением офиса компании выглядит необычно. Необычность заключалась в том, что цвет фона и объектов на карте сочетался с цветовой схемой сайта. Мне стало очень интересно, как это реализовано. Так как это была карта Google, я открыл сайт с API Google Карт и стал знакомиться с возможностями по стилизации. О результатах своих «исследований» я расскажу в этой заметке.

Оказывается, стилизовать карту Google под свой сайт несложно, потому что существует мастер стилизации карт с удобным и понятным интерфейсом. При открытии страницы для настройки карты, появляется всплывающее окно со справкой по работе с мастером (правда на английском языке).

Сначала находим на карте интересующий нас регион. Если вам известны координаты, то можно их ввести в поле в правом верхнем углу страницы. Далее проводим стилизацию карты. С помощью мастера можно провести очень гибкую настройку: стилизовать можно как различные объекты на карте (улицы и трассы, водоемы, фон карты в населенных пунктах и т.п.). Комбинаций для настройки, предоставляемых мастером довольно много. Вы может применять несколько стилей к вашей карте. Добавлять новые стили можно в разделе Map style справа на странице мастера. Таким образом, вы можете хранить отдельно стили, применяемые для разных объектов на карте.

интерфейс мастера стилизации карт

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

Проще всего разместить на своем сайте стилизованную статическую карту. Для этого жмем на странице мастера кнопку “Static Map” и появившемся окне копируем ссылку на изображение. На странице своего сайта вставляем скопированный URL в качестве значения атрибута src html-элемента <img />.

С размещением динамической карты дело обстоит немного сложнее. Нажимаем на кнопку “Show JSON” и копируем полученный в формате JSON результат. У меня получился следующий код:

JSON

[ { "stylers": 
           [ { "hue": "#0000ff" },
              { "saturation": 50 },
              { "lightness": 10 }, 
              { "gamma": 1 }, 
              { "visibility": "on" },
              { "weight": 0.5 }
          ]
 } ]

Создадим объект featureOpts и сохраним в нем полученные от мастера данные. Разместим на странице элемент <div> с id=”map_canvas”. В нем будет размещаться карта. Предварительно зададим размеры блока (640×480 пикселей). Теперь нужно подключить API Google Карт к нашей странице и вставить код для отображения нашей стилизованной карты.

JavaScript

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
      var map;
      // координаты карты
      var oz = new google.maps.LatLng(55.805044,38.976746);
      var MY_MAPTYPE_ID = 'custom_style';
      function initialize() {
       // стили 
       var featureOpts = [ 
			{ "stylers": 
				[ { "hue": "#0000ff" }, 
				  { "saturation": 50 }, 
				  { "lightness": 10 }, 
				  { "gamma": 1 }, 
				  { "visibility": "on" }, 
				  { "weight": 0.5 }
				] 
			} ];
        var mapOptions = {
          zoom: 13,
          center: oz,
          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: 'Custom Style'
        };
        var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
        map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
      }
    </script>

Если все сделано правильно, то вы увидите результат своей работы. Ознакомьтесь с результатом моей работы.

Конечно же, возможности API Google Карт не ограничиваются стилизацией карты, описанной в этом небольшом примере. С широчайшими возможностями API Google Карт можно ознакомиться на сайте Google для разработчиков.

Прочитано 15764 раз
Добавить комментарий
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: