Создание сайтов > Программирование > Начинаем использование API Google карт

Начинаем использование API Google карт

Начинаем использование API Google карт (Getting use API Google maps)
Сегодня я расскажу вам о самом простом способе вывода карты на своей странице. Также расскажу подробно о коде, который мы будим использовать в нашем примере.

Для начала работы, вам нужно получить ключ.

В дальнейшем вы должны использовать этот ключ на своей странице.
Если вы хотите пробовать свою карту на localhost’e, то ключ вам не нужен.

На localhost’e можно просто убрать {ваш ключ}.

Как же вывести карту на странице?
Для начала подключаем API карт:

Далее вставляем html код:

  • Обратите внимание на onload и onunload у тега body.
  • Блок с id map будет содержать внутри себя содержимое карты.

Ну и теперь вставляем javascript код для вывода карты:
function initialize(){ // Функция, которая будет вызвана при загрузке страницы.
if (GBrowserIsCompatible()) { // Проверяем совместимость браузера с картой
var map = new GMap2(document.getElementById("map")); // Создаем объект карты, где map - это id блока в котором выводить нашу карту.
map.setCenter(new GLatLng(52.424198,30.962219), 10); // Устанавливаем координаты карты. 10 - масштаб.
}
}

Обязательно учтите момент, когда мы объявляем где выводить нашу карту.

А теперь все, что я описал выше:





API карт Google на JavaScript




В итоге мы получаем карту на нашей странице.

Посмотреть пример

Если что-то не понятно, жду вопросов в комментариях.

25 февраля 2010 в 14:1113 комментариев Программирование, , ,

Комментарии — 13 комментариев

  1. #9407 Kolyanya в 12:01, 28 февраля 2010:

    Ответить | Цитировать

    пример не просматривается.Просит какой-то другой ключ карт

  2. #9418 WebMast в 11:02, 2 марта 2010:

    Ответить | Цитировать

    Я вроде как ключ прописал. Пописал согласно google help : ). Нужно разобраться, хм…

  3. #9421 WebMast в 20:05, 3 марта 2010:

    Ответить | Цитировать

    Kolyanya, работает. Скорее всего, нужно подождать какое-то время, чтобы ключ подействовал.

  4. #9446 kvaki в 5:25, 16 марта 2010:

    Ответить | Цитировать

    Не вижу ничего в этом плохого, если честно. По крайней мере то что на Вашем сайте ведутся обсуждения среди пользователей, сайт точно не испортит. А не то так сразу и форумы прикрыть можно.

  5. #9455 Скептик в 17:17, 17 марта 2010:

    Ответить | Цитировать

    Яндекс имеет для своих карт такой же синтаксис, они украли у гуглу код и немного его переделали?

  6. #9511 Pavlina в 0:35, 24 марта 2010:

    Ответить | Цитировать

    У меня такая же лажа. Где можно другие ключи найти?

  7. #9513 Pavlina в 0:39, 24 марта 2010:

    Ответить | Цитировать

    мне поисковик выбивает этот сайт Pavlina но я туда не могу зайти:(

  8. #9515 WebMast в 8:37, 24 марта 2010:

    Ответить | Цитировать

    Pavlina,
    1) Другой ключ вы нигде не получите.
    2) Ваш сайт не доступен в сети.

  9. #9527 WebMast в 19:27, 25 марта 2010:

    Ответить | Цитировать

    Скептик, честно, я не знаю. Яндекс — аналог google map, только в нем улучшенное отображение российский карт.

  10. #9544 kos32 в 6:08, 27 марта 2010:

    Ответить | Цитировать

    Рекомендую использовать карту OpenStreetMaps
    1) Google Maps API намеренно скрывает некоторые страны, например Израиль http://habrahabr.ru/blogs/google/88842/
    2) OpenStreetMaps более подробные и из можно свободно редактировать, лицензия позволяет использовать ее как угодно

    Карту можно включить в iframe, или использвовать продвинутый API от cloudmade.com
    Пример http://kos.at.tut.by/w.html

  11. #9660 Сергей в 5:23, 9 мая 2010:

    Ответить | Цитировать

    http://code.google.com/intl/ru/apis/maps/signup.html — получите ключ здесь. У меня всё прекрасно заработало.

  12. #11838 Аян в 11:52, 27 июня 2011: (подписался)

    Ответить | Цитировать

    Все отлично получилось и все понятно!!!
    Только одна просьба
    как можно узнать про эти элементы управления картами Google Api,
    И где их достать? Чтобы самостоятельно все это делать…..

  13. #12790 Стандартные элементы управления веб-картой | Блог Интернет Технологий в 23:06, 19 января 2012:

    Ответить | Цитировать

    […] предыдущей статье «Начинаем использование API Google карт» я рассказал о добавлении веб-карты Google на вашей […]

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting