Google maps & jQuery: позиционирование карты

Владимир | | Ajax, HTML, JavaScript, Web разработка.

google maps positioning

Приветствую всех!

В этой статье речь пойдет о создании небольшого приложения, работающего с картами google.

Идея следующая. У вас в базе данных есть какая-то информация об объектах, которые нужно показать на карте (например, информация о городах). Нужно:

      1) вывести список этих объектов;
      2) при клике на любом из объектов переместить карту так чтобы выбранный объект оказался в её центре;
      3) показать на карте развернутую информацию о выбранном объекте.

Вообще-то существует некоторое количество готовых решений. В основном плагинов для различных CMS. Но часто подключение таких плагинов к существующей системе занимает больше времени, чем написание собственного решения. Кроме того, своё решение проще дорабатывать и поддерживать.

Переходим к реализации.

Посмотреть на результат можно на демонстрационной страничке

А скачать код – на GitHub'е.

1) Источник данных

Чтобы не усложнять пример, будем считать, что данные получены из базы, преобразованы в JSON формат, и мы можем получить их с помощью GET запроса. Например, запрос

GET /data.json HTTP/1.1

Должен вернуть нам

[
	{
		"city": "Киев",
		"lat": 50.5,
		"lng": 30.5,
		"desc": "столица Украины"
	},
	...
]

2) Создаём страницу с картой

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Позиционирование Google Maps</title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>
	<header>Google maps: позиционирование</header>
	<div class="content">
		<div id="cities"></div>
		<div id="map"></div>
	</div>
	<footer><a href="https://www.simplecoding.org/">simplecoding.org</a></footer>
	<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="main.js"></script>
</body>
</html>

На странице размещены два блока id="cities" (для списка городов) и id="map" (для карты). Подключены Google Maps, jQuery и скрипт main.js.

3) JavaScript код (main.js)

Здесь выполняется основная часть работы.

$(function() {
    var map;
    var infoBox = new google.maps.InfoWindow();
    var mapContainer = $('#map');
    mapContainer.width('70%').height(500);

    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(50.5, 30.5),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), mapOptions);
    }

    initialize();

    $.getJSON('data.json', function(data) {
        if (data.length > 0) {
            var list = $('<ul>');
            $.each(data, function(index, city) {
                var item = $('<li>')
                    .on('click', city, showCity)
                    .html(city.city);
                list.append(item);
            });
            $('#cities').html(list);
        }
    });

    function showCity(event) {
        var coords = new google.maps.LatLng(event.data.lat, event.data.lng);
        infoBox.setContent(event.data.city + ' - ' + event.data.desc);
        infoBox.setPosition(coords);
        infoBox.open(map);
        map.setCenter(coords);
    }
});

Прежде всего, создаём надпись с информацией о городе (InfoWindow) и устанавливаем размер для контейнера карты (строки 2-5).

Затем инициализируем карту (функция initialize, строки 7-16). Этот код стандартный и взят из официальной документации. Мы указываем координаты центра, приближение, тип карты и создаём объект google.maps.Map. В этот момент выполняется отрисовка карты.

Теперь необходимо получить данные и сформировать список городов.

Для этого отправляем AJAX-запрос с помощью метода $.getJSON (строки 18-29). Обратите внимание, что jQuery автоматически преобразует ответ сервера в JSON формат. Т.е. параметр data содержит массив с данными, а не строку.

Обработчик ответа проверяет количество элементов в массиве (городов) и если оно больше нуля формирует список. При этом каждому элементу li назначается обработчик события onclick. Рассмотрим эту часть немного подробнее

$('<li>').on('click', city, showCity)

Метод on позволяет присоединить обработчик события к любому объекту jQuery. В первом параметре мы указываем тип события, в данном случае это клик мышкой. Во втором – объект с информацией о городе, который будет доступен обработчику в момент клика. В третьем – имя функции-обработчика, которая будет вызвана при возникновении события.

Сформированный список показываем на странице (строка 27).

Теперь рассмотрим функцию showCity (строки 31-37).

Она вызывается при клике по названию города. Данные о городе передаются в параметре event.data.

Т.к. координаты, название и описание города у нас есть, то остаётся только позиционировать карту и показать InfoWindow. Для этого:

      1) Создаём объект google.maps.LatLng с координатами города. Он нужен для позиционирования и карты и InfoWindow.
      2) Формируем текст, который нужно показать в InfoWindow (строка 33).
      3) С помощью методов setPosition и open позиционируем и отображаем InfoWindow на карте.
      4) Используем метод setCenter для позиционирования карты.

Заключение

Как видите, весь код занимает около 40 строк. При этом большая часть – работа с API Google Maps, который хорошо документирован. И при этом можно с минимальными усилиями изменить код так, чтобы он соответствовал практически любому формату данных, которые хранятся в базе.

Успехов! И с наступающими праздниками!