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

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

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

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

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

<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false &key={ваш ключ}" type="text/javascript">
</script>

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

Как же вывести карту на странице?
Для начала подключаем API карт:
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false &key=" type="text/javascript">
</script>

Далее вставляем html код:
<body onload="initialize()" onunload="GUnload()">
<div id="map" style="width:500px;height:300px;border:1px solid #eee"></div>
</body>

  • Обратите внимание на 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 - масштаб.
}
}

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

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>API карт Google на JavaScript</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=" type="text/javascript"></script>
<script type="text/javascript">
function initialize(){ // Функция, которая будет вызвана при загрузке страницы.
if (GBrowserIsCompatible()) { // Проверяем совместимость браузера с картой
var map = new GMap2(document.getElementById("map")); // Создаем объект карты, где map - это id блока в котором выводить нашу карту.
map.setCenter(new GLatLng(52.424198,30.962219), 10); // Устанавливаем координаты карты. 10 - масштаб.
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map" style="width:500px;height:300px;border:1px solid #eee"></div>
</body>
</html>

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

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

Комментарии — 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 намеренно скрывает некоторые страны, например Израиль habrahabr.ru/blogs/google/88842/

    2) OpenStreetMaps более подробные и из можно свободно редактировать, лицензия позволяет использовать ее как угодно

    Карту можно включить в iframe, или использвовать продвинутый API от cloudmade.com

    Пример kos.at.tut.by/w.html

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

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

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

    Все отлично получилось и все понятно!!!

    Только одна просьба

    как можно узнать про эти элементы управления картами Google Api,

    И где их достать? Чтобы самостоятельно все это делать...

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

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting