Добавляем Google Maps на блог/сайт.


Собственно простой мануал.
Google давно уже не просто поисковик, а ресурс со множеством полезных фишек и интересных штучек.Одним из них являеться Google maps.Проект представляющий карты земной поверхности.Он имеет множество полезных настроек.Где это может понадобиться? Подаю идею, например, вы крупная фирма, которая оказывает услуги для иностранцев в виде представления им гостиниц на территории определенной страны или даже города.Поставив google maps на свою страницу вы, кроме того что указываете где находиться какой-нибудь отель или гостиница, чтоб иностранцы могли и знали как добираться, можете также указать различные метки, например цены за ночь. Уже не приходиться смотреть в огромные списки отелей и цен, нужно всего лишь выбрать страну, интерактивно увеличить масштаб, выбрать город и довольствоваться гостиницами в разных участках города. Кроме того можно поставить метки с указанием фото гостиниц.Как видите, примеров может быть очень много.
Для этого нам нужен javascript код, который можно взять с google. Выбираем “Другие продукты Google”, переходим на “API и открытый исходный код”.Переходим на приложения Ajax и вот она — “API Карт Google”.Для первого шага нам понадобиться зарегестрировать свой сайт для получения ключа к API Карт Google.Будет сгенерирован ключ.Запоминаем его.После нам выдадут такой вот html код с javascript:


 <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?
file=api&v=2&key=ABCDEFG&sensor=true"
            type="text/javascript"></script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(40.422644, 49.878960), 11);
        map.setUIToDefault();
      }
    }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>


На месте, где key=ABCDEFG вставляем полученный нами код.А это — (40.422644, 49.878960) – географические координаты.Меняем его на нужные нам координаты, нашей страны или города(здесь уже готовые координаты Баку).Число 11 после координатов ответственнен за масштаб, меняем его тоже на нужный нам.Для удобного просмотра.После, ставим этот код в нашу страничку.С более подробными фишкам(например, вставка различных меток) можно познакомиться при изучении полной документации google maps.
  • +2
  • 11 апреля 2010, 14:49
  • Biotin

Комментарии (4)

RSS свернуть / развернуть
+
0
У тя на блоге есть? Демо версию покажи =)
avatar

Farik

  • 11 апреля 2010, 21:33
+
0
да, есть. здесь :)
avatar

Biotin

  • 11 апреля 2010, 21:43
+
0
Замечательно и необходимо.
Жаль что не раскрыта тема добавления меток — это, как раз, очень актуально.
avatar

shad

  • 13 апреля 2010, 11:44
+
0
ага, про метки я бы тоже послушал.
avatar

elchin

  • 16 апреля 2010, 17:19

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.