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

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

Требования

Установка

Скачайте последнюю версию 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]
    }
};

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • Михаил

    без примеров не актуально

    • Ссылки -> Примеры )))