В конечном результате важен конечный результат!

среда, января 11, 2006

Как добавить карту от Google практически на любую страницу?

Как добавить карту от Google практически на любую страницу в течение пары-тройки минут? Не знаете? Щаз я вам расскажу:
В первую очередь, вам необходимо будет использовать ваш Google Maps API key, при помощи которого вы сможете получить желаемую карту. Это можно сделать тут. По ссылке вы попадете в раздел создания сервисов на основе Google Maps, который вам очень пригодится! Кликаете по ссылке "Sign up for a Google Maps API key" и регистрируетесь. Полученный ключик можно использовать только на страницах укзанного домена! Но, можно получить два ключика - один для сервера, а другой для конкретного домена.

С ключиком вы получите стартовый код, который выглядит примерно вот так:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=[ВАШ_КЛЮЧ]" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

//]]>
</script>
</body>
</html>


Код от Google приводит к некоторому "расслоению" карты в Internet Explorer, так что мы проведем некоторую модификацию, чтобы код работал чуток лучше - а конкретно, то мы добъемся того, чтобы все данные сначала грузились, а потом уже карта рисовалась:


<script type="text/javascript">
//<![CDATA[
window.onload = showMap;
function showMap()
{
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
}
//]]>
</script>


Этот код нарисует карту. Поместите этот код куда-нить после DIV'а с картой.
Итак, теперь у вас есть карта, на которой вы Пало-Альто, т.е. видете штаб-квартиру Google. А как сделать, чтобы была отмечена другая точка (маркер), которую мы хотим? А делается это очень просто!

Просто замените следующую строчку

map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

на что-нить типа этого:

map.addOverlay(new GMarker(new GPoint(54.707962, 20.506668)));

Ну вот собственно и все... :) Должно получится и у вас... :)

4 комментария:

AlDev комментирует...

получился отличный ответ на вопрос: "где ты живешь?" :)

injun #576871 комментирует...

Тут мне написали на мыльник, что у кого-то глюки были и не работало... У тебя заработало?
:)
А вообще, да... я живу по координатам 54.707962, 20.506668 или по-простому, то в Калининградской области, г. Калининград... :)

AlDev комментирует...

у меня все заработало :)
http://batsuev.com/google/maps/

injun #576871 комментирует...

О... прекрасно... :)
Вообще, Google Maps API - клевая штука... :) стоит почитать мануалы, так такие перспективы открываются... :)