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

Автор: | 14.11.2009

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В данном проекте используется принцип многослойного объекта 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 в Москве

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

    1. admin Автор записи

      Заметка давно написана 14 ноября 2009 года, когда была старая версия

  1. Василий

    Было бы прикольно это связать с Joomla а именно с adsmanager.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *