Только HTML для создания карт Google Maps. Часть 1. Введение
Воистину интернет мир чудес и нет числа сокровищам его! Стоит о чем-то помечтать и обратиться к поисковику - и вот она, мечта, на заветном блюдечке. А помечталось мне о том, что хорошо бы работать с картами гугл без всяких скриптов, на чистом html. И что бы Вы думали? Есть такой способ! Удивился, проверил - работает. Вот о нем и расскажу. Это как бы логическое продолжение предыдущей статьи, где мы также создавали карту, не прибегая к программированию. Будет у нас парочка способов, на выбор.
Желающие потренироваться в английском могут это сделать вот здесь: http://n01se.net/chouser/gmapez/start.html А мы с Вами будем общаться на нормальном, русском языке :-)
Разработчики просят указывать их логотип, если мы создаем карту на своем сервере. Логотип небольшой и симпатичный, обязательно укажем.
Если у Вас еще нет ключа карт гугл для вашего сайта, получить его можно здесь: Google Maps API Key. Я об этом писал уже не раз, подробно останавливаться не буду.
Только карта
Самая простая страничка HTML, которая включает карту Google Map с помощью GMapEZ будет выглядеть наподобии приведенной ниже. Обязательно укажите собственный ключ для карт Google вместо строки "abcdefg" в этом примере:
Результат приведен на картинке.
Чтобы изменить окно просмотра на карте нужно добавить метку или указать экстент карты, иначе карта будет отображать Fort Wayne, Indiana.
В приведенном выше коде ключевым моментом является задание директивы class="GMapEZ" тэге <div>; если этого не сделать, код будет обработан как обычный <div> и карта не отобразится.
Добавление метки
Xтобы создать метку для карты, нужно зайти на сайт maps.google.com/, дважды щелкнуть на точке, где должна будет размещаться метка и нажать "Ссылка на эту страницу".
Примечание: требуется именно дважды щелкнуть на карте или перетаскивать карту, после поиска по адресу необходимо дважды щелкнуть на нужном месте или переместить карту мышью. Теперь скопируйте полученный адрес URL в обыкновенный тэг <a href="..."> аналогично нашему примеру:
Если Вы не видите символов "ll=" во вставленном адресе URL, он не корректен - не забывайте после поиска адреса переместить карту или дважды щелкнуть на ней. Также отметим, что тип полученной карты соответствует режиму карты, для которой скопирована ссылка - мы это делали для спутниковой карты (тип "satellite").
Добавление нескольких меток
Чтобы создать несколько меток, просто укажите нужное количество тэгов <a href="...">:
Изменение типа карты
Чтобы изменить тип отображаемой карты, добавьте G_MAP_TYPE, G_SATELLITE_TYPE или G_HYBRID_TYPE в атрибуты класса. Приведем пример, как сделать карту типа G_HYBRID_TYPE:
Примечание: идентификатор G_MAP_TYPE используется Google для стандартной карты улиц.
Вы также можете позволить пользователю изменять тип карты во время работы, для этого нужно лишь добавить на карту элемент управления типом карты (как это сделать, мы узнаем далее).
Буквенные и цветные метки
Все созданные нами метки имеют стандартное оформление. Кроме того, мы можем воспользоваться любой строчной или прописной буквой, цифрой, знаком #, знаком $, знаком START (закрашенный треугольник, указывающий вправо), или END (закрашенный квадратик). Начиная с версии GMapEZ 2.2, доступны свойства значков MINI и BLANK. А в версии GMapEZ 2.3 также можно использовать свойство INVISIBLE (невидимый) - такие значки не отображаются на карте, однако чувствительны к нажатию и могут быть полезны для отображения окна информации. Перечисленные иконки можно делать цветными, используя следующие названия цветов: ORANGE, PURPLE, YELLOW, GREEN, BLUE, RED, AQUA, WHITE и GRAY. Название символа и цвет следует писать внутри тэга <a>:
Продолжение следует...
Желающие потренироваться в английском могут это сделать вот здесь: http://n01se.net/chouser/gmapez/start.html А мы с Вами будем общаться на нормальном, русском языке :-)
Разработчики просят указывать их логотип, если мы создаем карту на своем сервере. Логотип небольшой и симпатичный, обязательно укажем.
<a href="http://bluweb.com/chouser/gmapez/"><img
alt="Powered By GMapEZ"
src="http://bluweb.com/chouser/gmapez/poweredbygmapez.jpg"
style="width:73px;height:25px;border:none;" /></a>
Если у Вас еще нет ключа карт гугл для вашего сайта, получить его можно здесь: Google Maps API Key. Я об этом писал уже не раз, подробно останавливаться не буду.
Только карта
Самая простая страничка HTML, которая включает карту Google Map с помощью GMapEZ будет выглядеть наподобии приведенной ниже. Обязательно укажите собственный ключ для карт Google вместо строки "abcdefg" в этом примере:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>My GMapEZ Maps</title>
<meta name="gmapkey" content="abcdefg" />
<script
src="http://bluweb.com/chouser/gmapez/gmapez-2.js"
type="text/javascript"></script>
</head>
<body>
<div class="GMapEZ" style="width: 300px; height: 300px;">
</div>
</body>
</html>
Результат приведен на картинке.
Чтобы изменить окно просмотра на карте нужно добавить метку или указать экстент карты, иначе карта будет отображать Fort Wayne, Indiana.
В приведенном выше коде ключевым моментом является задание директивы class="GMapEZ" тэге <div>; если этого не сделать, код будет обработан как обычный <div> и карта не отобразится.
Добавление метки
Xтобы создать метку для карты, нужно зайти на сайт maps.google.com/, дважды щелкнуть на точке, где должна будет размещаться метка и нажать "Ссылка на эту страницу".
Примечание: требуется именно дважды щелкнуть на карте или перетаскивать карту, после поиска по адресу необходимо дважды щелкнуть на нужном месте или переместить карту мышью. Теперь скопируйте полученный адрес URL в обыкновенный тэг <a href="..."> аналогично нашему примеру:
<div class="GMapEZ" style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en">
</a>
</div>
Если Вы не видите символов "ll=" во вставленном адресе URL, он не корректен - не забывайте после поиска адреса переместить карту или дважды щелкнуть на ней. Также отметим, что тип полученной карты соответствует режиму карты, для которой скопирована ссылка - мы это делали для спутниковой карты (тип "satellite").
Добавление нескольких меток
Чтобы создать несколько меток, просто укажите нужное количество тэгов <a href="...">:
<div class="GMapEZ" style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en">
</a>
<a href="http://maps.google.com/maps?ll=40.755580,-73.937988&spn=6.276505,5.552490&hl=en">
</a>
<a href="http://maps.google.com/maps?ll=41.877741,-87.637939&spn=6.169597,5.552490&hl=en">
</a>
<a href="http://maps.google.com/maps?ll=33.916013,-118.179932&spn=6.874500,5.552490&hl=en">
</a>
</div>
Изменение типа карты
Чтобы изменить тип отображаемой карты, добавьте G_MAP_TYPE, G_SATELLITE_TYPE или G_HYBRID_TYPE в атрибуты класса. Приведем пример, как сделать карту типа G_HYBRID_TYPE:
<div class="GMapEZ G_HYBRID_TYPE"
style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&hl=en">
</a>
</div>
Примечание: идентификатор G_MAP_TYPE используется Google для стандартной карты улиц.
Вы также можете позволить пользователю изменять тип карты во время работы, для этого нужно лишь добавить на карту элемент управления типом карты (как это сделать, мы узнаем далее).
Буквенные и цветные метки
Все созданные нами метки имеют стандартное оформление. Кроме того, мы можем воспользоваться любой строчной или прописной буквой, цифрой, знаком #, знаком $, знаком START (закрашенный треугольник, указывающий вправо), или END (закрашенный квадратик). Начиная с версии GMapEZ 2.2, доступны свойства значков MINI и BLANK. А в версии GMapEZ 2.3 также можно использовать свойство INVISIBLE (невидимый) - такие значки не отображаются на карте, однако чувствительны к нажатию и могут быть полезны для отображения окна информации. Перечисленные иконки можно делать цветными, используя следующие названия цветов: ORANGE, PURPLE, YELLOW, GREEN, BLUE, RED, AQUA, WHITE и GRAY. Название символа и цвет следует писать внутри тэга <a>:
<div class="GMapEZ"
style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en">
A
</a>
<a href="http://maps.google.com/maps?ll=40.755580,-73.937988&spn=6.276505,5.552490&hl=en">
YELLOW MINI
</a>
<a href="http://maps.google.com/maps?ll=41.877741,-87.637939&spn=6.169597,5.552490&hl=en">
PURPLE END
</a>
<a href="http://maps.google.com/maps?ll=33.916013,-118.179932&spn=6.874500,5.552490&hl=en">
GREEN START
</a>
</div>
Продолжение следует...
Comments