Совместное использование API Яндекс.Карт и Google Maps на примере портала «Где Этот Дом.Ру»

В начале несколько слов о самом проекте.

Портал http://www.gdeetotdom.ru создан с целью облегчить пользователям Интернет задачу поиска объектов недвижимости в Москве, Санкт-Петербурге, других городах России и зарубежья.

Там вы можете:

• дать объявление о продаже одно-, двух-, многокомнатной квартиры, студии, дома, бизнес-площадей, земельного участка;
• осуществить поиск квартиры по объявлениям агентств или частных лиц для покупки без посредников;
• получить сведения о ценах на квартиры в Москве, жилье в Санкт-Петербурге, недвижимость в России, СНГ и дальнем зарубежье с помощью сервиса ged.index;
• найти дом по его адресу на интерактивной видео-карте Россия 360°.

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

В начале, зайдем на страницу по адресу http://www.gdeetotdom.ru/map/

На открывшейся странице мы увидим карту Google с маркером по адресу: Москва, ул. Поварская, дом 28.

На карту также нанесены значки,  щелкнув по которым мы можем увидеть фотографии домов.

В верхней части карты расположены дополнительные элементы управления: влючение и выключения слоев Россия 360, с фотографиями и инфрастуктурой (рестораны, кафе) и переключения на другой тип API карт (с Google Maps на Яндекс.Карты и на оборот), переключение типа карты (карта, спутник, гибрид), а также включения-выключения широкого формата карты.

Если мы нажмем на кнопку изменения типа API карт (Яндекс.Карты), после перезагрузки мы увидим новую карту значки на которой имеют тоже местоположение.

Давайте подробно рассмотрим, как это реализовано.

В данном проекте используется принцип многослойного объекта Map.

Самый нижний слой некая абстрактный объект карта (MapFactory).

Выше идут информационные слои.

Самый верхний слой с элементами управления

Конкретная карта подключается по принципу драйвера, в зависимости от выбранного источника карты подгружается нужный код Java Script.

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

В Яндекс.Картах с начала записывается значение широты (latitude), а затем долготы (longitude).

В Google Maps наоборот, сначала долгота, затем широта.

Для реализации переключения между картами на портале «Где Этот Дом.Ру» в общем случае используются две функции : задания начальных значений карты initMap и выввода конкретного кода JS – mapFactory.

Приведу упрощенный код для этих функций.

function initMap()
{
    var params = new Array();
    params['latitude']  = 37.64;
    params['longitude'] = 55.76;
    params['type']      = 'map';
    params['div']       = 'map_canvas';
    params['zoom']      = 17;  
    var map = mapFactory( 'draver', params );
	map.render();
}

Где параметр draver может принимать два значения google или yandex в зависимости от вида текущей карты.

function mapFactory(type,params)
{
If(type=’yandex’){
this.map = new YMaps.Map(document.getElementById(div));
YandexMap.prototype = new Map();
YandexMap.prototype.setCenter = function(latitude,longitude,zoom){
point = new YMaps.GeoPoint(latitude,longitude);
this.map.setCenter(point,zoom);}
map = new YandexMap(params.div);
}
else //Google Maps
{
this.map = new GMap2(document.getElementById(div));
GoogleMap.prototype = new Map();
GoogleMap.prototype.setCenter = function(latitude,longitude,zoom){
point = new GLatLng(longitude,latitude);
this.map.setCenter(point,zoom);}
map = new GoogleMap(params.div);
}
return map;
}

Для каждого из вида карт используется своя форма поиска.

В будущем я планирую подготовить подобный пример реализации совмещения API Яндекс.Карт и Google Maps с описанием полного кода.

9 декабря 2009 года — добавил запись выступления Александра Смирнова, руководителя отдела разработчики проекта «Где Этот дом», на Google Developer Day 2009 в Москве