Tag Archives: GooleMap

Примеры работы с разными map API

bd72073cЕсть много статей на тему знакомства с Google Map Api и Yandex Map Api, но про остальные картографические сервисы не так много практического материала. В недавнем времени работал с Api:

  1. Google map
  2. Yandex map
  3. Yahoo map
  4. Bing map
  5. OpenStreet map

И хотел обобщить работу с вышеупомянутыми сервисами, а именно инициализация карты и установление маркеров по клику мышки. Материалы в статье представлены в виде Html кода, javascript и результата — скриншота, а так же исходники на vs 2010 MVC3.

С Google map ситуация проще всего: практического материала много, мой пример выглядит следующим образом:
Html page:

Script:

В результате получим карту Google c возможностью добавлять маркеры:

53ce9ecbДля инициализации Yandex map вам понадобится ключ доступа к сервису и следующий пример:
Html page:

Script:

В результате получим карту Yandex c возможностью добавлять маркеры:

Яндекс картаОбратите внимание на координаты, в Google идет сначала долгота, потом широта, а в Yandex наоборот!

Пример работы с Yahoo map api:
Html page:

Script:

В результате получим карту Yahoo c возможностью добавлять маркеры:

Yahoo картаДля работы с Bing map api нужно взять ключ:
www.microsoft.com/maps/developers/web.aspx
Пример работы с Bing map api:
Html page:

Script:

В результате получим карту Bing c возможностью добавлять маркеры:

Карты BindПример работы с OpenStreet map api:

Html page:

Script:

В результате получим карту OpenStreet c возможностью добавлять маркеры:

OpenStreet картаВот такие интересные примеры работы с картами, думаю кому то будут полезны.

Исходники на VS2010 MVC3.


Источник: http://habrahabr.ru/post/131249/

Разработка и создание сайтов, интернет-магазинов, веб-приложений, порталов, лэндингов, мобильных приложений (Киев)