Фев

Внедрение Google Maps посредством gMap

gMap - легковесный, гибкий jQuery плагин, облегчающий внедрение Google Maps на ваш сайт. Весит около двух килобайт.

Требования

Наличие Google Maps API key
Библиотека jQuery (не ниже 1.3)

Установка

Скачайте последнюю версию gMap, подключите Google Maps API вместе с jQuery и gMap в секции <head> вашей веб-страницы. Не забудьте вписать ваш реальный API key для данного домена.

<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=API_KEY"></script>
<script type="text/javascript" src="javascripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.gmap-1.0.2-min.js"></script>

HTML структура

Структура документа проста - поместите пустой <div> в то место веб-страницы, где вы хотите увидеть карту. Задайте для него нужные вам стили и не забудьте зафиксировать ширину и высоту слоя. Придумайте уникальный идентификатор или класс, например id="gmap".

<div id="gmap"></div>

Создание карты

Выберите только что созданный <div>, используя jQuery селекторы и вызовите метод gMap(), когда DOM будет готов. Для получения дополнительной информации обратитесь к документации jQuery.

<script type="text/javascript">
$(function() {
    $("#gmap").gMap();
});
</script>

Настройка

GMap имеет очень много настроек. Всё, что нужно сделать, это передать объект JSON в Gmap(). Ниже приведен полный список настроек. Свойства со значением по умолчанию не являются обязательными.

latitude: float

По умолчанию: 0
Широта. Видимая область будет отцентрирована на карте на основе этой координаты.

longitude: float

По умолчанию: 0.
Долгота. Видимая область будет отцентрирована на карте на основе этой координаты.

zoom: integer

По умолчанию: 6
Увеличение. Число от 1 до 19, где 19 - наибольшее увеличение, 1 - меньшее.

markers: array

По умолчанию: []
Список точек для наложения на карту. Каждый элемент массива должен быть в формате JSON.
Для каждой точки вы можете определить свойства:

latitude: float: Широта точки
longitude: float: Долгота точки
html: string: По умолчанию: ""
Содержимое в формате HTML, которое будет показано в информационном окне для данного маркера.
Если оставить пустым, то при клике на маркер - окно не появится.
popup: boolean: По умолчанию: false
Если данную опцию установить в true, то информационное окно появится сразу после загрузки карты.
Соответственно, если "html" не заполнено - окно не появится, опция просто проигнорируется.
icon: json ^{since 1.0.2}: Массив пользовательских изображений для текущего маркера.
Описание смотри в глобальном свойстве "icon".

controls: array

По умолчанию: []
Массив имен функций без круглых скобок, добавляющих панели управления
Список возможных значений смотрите на Google Maps API.

scrollwheel: boolean

По умолчанию: true
Установите в false, чтобы отключить масштабирование колёсиком мыши.
Если "controls" не определена, данная опция проигнорируется.

maptype: variable ^{since 1.0.1}

По умолчанию: G_NORMAL_MAP
Предопределенная переменная для установки типа карты.
Подробнее на Google Maps API.

html_prepend: string ^{since 1.0.1}

По умолчанию: <div class="gmap_marker">
HTML строка для начала описания информационного окна маркерастилизуется через CSS.

html_append: string ^{since 1.0.1}

По умолчанию: </div>
HTML строка для конца описания информационного окна.

icon: json

Множество свойств для описания пользовательских маркеров.

image: string: По умолчанию: http://www.google.com/mapfiles/marker.png
Абсолютный путь до изображения, описывающего маркер.
shadow: string: По умолчанию: http://www.google.com/mapfiles/shadow50.png
Абсолютный путь до изображения, описывающего тень от маркера на карте.
Необязательная опция, если, например, на вашем маркере уже есть тень.
iconsize: array: По умолчанию: [20, 34]
Массив числовых значений для ширины и высоты валидного изображения маркера.
shadowsize: array: По умолчанию: [37, 34]
Массив числовых значений для ширины и высоты валидного изображения тени от маркера.
iconanchor: array: По умолчанию: [9, 34]
Относительные координаты верхнего левого угла изображения маркера.
infowindowanchor: array: По умолчанию: [9, 2]
Относительные координаты верхнего левого угла изображения информационного окна.

Пример

options =
{
    latitude:               47.58969,
    longitude:              9.473413,
    zoom:                   10,
    markers:                [{latitude: 47.670553, longitude: 9.588479, html: "Tettnang, Germany"},
                             {latitude: 47.65197522925437, longitude: 9.47845458984375, html: "Friedrichshafen, Germany"}],
    controls:               ["GSmallMapControl", "GMapTypeControl"],
    scrollwheel:            false,
    maptype:                G_NORMAL_MAP,
    html_prepend:           '<div class="gmap_marker">',
    html_append:            '</div>',
    icon:
    {
        image:              "images/gmap_pin.png",
        shadow:             false,
        iconsize:           [19, 21],
        shadowsize:         false,
        iconanchor:         [4, 19],
        infowindowanchor:   [8, 2]
    }
};