45 городов России добавлены на Google Maps

21 ноября 2012 года объявлено о о крупном обновлении картографического сервиса Google: теперь в нем доступны детализированные карты еще 45 российских городов — от Сочи, будущей столицы зимних Игр 2014 года, до Владивостока.

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

В этом же примере демонстрируется возможность создания собственного элемента управления и размещения его на карте.

Полный список городов, для которых теперь доступны детализированные Карты Google:

— Азов (Ростовская область);
— Анапа (Краснодарский край);
— Артем (Приморский край);
— Барнаул (Алтайский край);
— Благовещенск (Амурская область);
— Бор (Нижегородская область);
— Великий Новгород (Новгородская область);
— Владивосток (Приморский край);
— Вологда (Вологодская область);
— Геленджик (Краснодарский край);
— Донецк (Ростовская область);
— Ейск (Краснодарский край);
— Иваново (Ивановская область);
— Ижевск (Удмуртия);
— Калуга (Калужская область);
— Канск (Красноярский край);
— Кемерово (Кемеровская область);
— Ковров (Владимирская область);
— Кстово (Нижегородская область);
— Курган (Курганская область);
— Луга (Ленинградская область);
— Мирный (Якутия);
— Муром (Владимирская область);
— Нижневартовск (ХМАО-Югра);
— Новокузнецк (Кемеровская область);
— Новороссийск (Краснодарский край);
— Обнинск (Калужская область);
— Орск (Оренбургская область);
— Пенза (Пензенская область);
— Ростов-на-Дону (Ростовская область);
— Саранск (Мордовия);
— Смоленск (Смоленская область);
— Советск (Кировская область);
— Сочи (Краснодарский край);
— Ставрополь (Ставропольский край);
— Сыктывкар (Республика Коми);
— Туапсе (Краснодарский край);
— Тюмень (Тюменская область);
— Урай (ХМАО-Югра);
— Ухта (Республика Коми);
— Хабаровск (Хабаровский край);
— Чебоксары (Чувашия);
— Череповец (Вологодская область);
— Чита (Забайкальский край);
— Якутск (Якутия)

Рассмотрим работу примера

После загрузки, мы наблюдаем карту города Азов, а в правом верхнем углу появился новый элемент управления «Список городов».

Щелкаем по нему и открывается панель со списком новых городов России на Google Maps.

Выбрав любой город по ссылке, он отображается на карте с меткой со значением координат и ссылкой «Посмотреть на Google Maps», щелкнув по которой, мы можем посмотреть этот же участок карты на сайте http://maps.google.ru

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

Рассмотрим код примера.

В начале мы задаем стили для отображения карты и ссылок.

Определяем массив с названиями и координатами городов.

Далее следует функция для создания элемента управления Legend, в качестве входных параметров она принимает: название (name) – оно будет отображаться на самом элементе управления; значение ширины элемента управления controlWidth; содержимое раскрывающейся панели в виде html-кода — content, а также ширину самой панели — contentWidth.

В функции мы создаем область div в которую будет помещаться код меню для выбора города, показываем или скрываем его в зависимости от клика по элементу управления.

function Legend(name, controlWidth, content, contentWidth) {
this.name = name;
this.content = content;
 
var container = document.createElement("div");
container.style.position = "relative";
container.style.margin = "5px";
 
var html = '<div style="background-color: white; width: ' + controlWidth + '; position: relative; overflow: hidden; border: 1px solid black; text-align: left; cursor: pointer;">' +
'<div style="color: black; font-family: Times New Roman,sans-serif; font-size: 14px; padding: 0px 5px; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0) rgb(208, 208, 208) rgb(208, 208, 208) rgb(112, 112, 112); font-weight: bold; -khtml-user-select:none; -moz-user-select:none;" unselectable="on">' +
name +
'</div>' +'<div style="position: absolute; right: 4px; top: 4px; -khtml-user-select:none;">' +
'<img src="http://maps.gstatic.com/intl/en_gb/mapfiles/down-arrow.gif" style="display: block;">' +
'</div>' +
'</div>' +
'<div style="display: none; padding: 5px; color: black;font-family: Arial,sans-serif; font-size: 14px; background-color:white; position: absolute; right: 0px; border: 1px solid black; width:' + contentWidth + '">' +
content +'</div>';
 
container.innerHTML = html;
this.div = container;
 
var control = container.childNodes[0];
var legend  = container.childNodes[1];
 
control.title = "Показать список городов";
 
control.onclick = toggle;
control.ontouchstart = touch;

В основной функции initialize мы определяем начальные параметры нашей карты, а затем формируем html-код меню выбора города.

Передаем его в качестве параметра в строке

var legend = new Legend("Список городов", "150px", html, "250px");

Определяем местоположение элемента управления

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(legend.div);

Функция townclick в зависимости от переданного ей значения, выбирает соответствующий элемент из массива newtowns и на его значениях производится центрирование карты

map.setCenter(new google.maps.LatLng(newtowns[town_id][1], newtowns[town_id][2]));

В эту же точку добавляется балун с информацией о городе и его координатах

var contentString = '<strong>'+newtowns[town_id][0]+
'</strong><br /><br />Координаты: '+newtowns[town_id][1]+', '+newtowns[town_id][2]+
'<br /><br /><a rel="nofollow" href="http://maps.google.ru/maps?f=q&hl=ru&ll='+newtowns[town_id][1]+','+newtowns[town_id][2]+
'&z=15" target="_blank">Посмотреть на Google Maps</a>';
 
var infowindow = new google.maps.InfoWindow({
    content: contentString
});
 
infowindow.open(map,marker);

Строчкой кода:

google.maps.event.addDomListener(window, 'load', initialize);

мы вызываем функцию initialize после полной загрузки страницы.