В последнее время множество разработчиков веб-сайтов используют для своих проектов HTML, CSS, и Javascript фреймворк — Twitter Bootstrap.
В этой заметке я покажу пару примеров использования данного фреймворка для вывода карты Google Maps в модальном окне (Bootstrap Modal).
В начале нам нужно скачать архив с самим фреймворком и установить его.
Переходим на страницу по адресу http://twitter.github.io/bootstrap/
На ней мы можем сделать выбор, какой набор файлов загружать:
нажать на кнопку "Download Bootstrap". На момент написания этой статьи версия v2.3.1.
перейти на Гитхаб (ссылка GitHub project) и оттуда скачать zip архив.
В первом случае вы скачаете архив, в котором будут лежать папки: css, js, img. В папке "css" уже будут лежать скомпилированные файлы стилей css.
Во-втором случае в архиве будут исходники на less + тот же набор что и в первом случае, а также примеры страниц.
Изначально bootstrap написан на less (язык стилей). То есть, для того чтобы получить файлы *.css — нужно файлы less скомпилировать в файлы css. Первый вариант нам и предлагает скачать уже готовые файлы css.
! Важно обратить внимание, что только в браузере FireFox будет работать less локально (т.е. если будете запускать со своего компьютера, без веб сервера).
И так, архив с файлами скачан и распакован.
В результате у нас есть папка bootstrap, а в ней:
— css
— img ( 2 файла с белыми и черными иконками)
— js (файл javascript для тех элементов bootstrap, которые его требуют: например, раскрывающийся список, галерея картинок и т.д.).
Теперь рассмотрим первый пример использования Bootstrap и Google Maps API (V3) — показываем модальное окно с картой при клике на кнопке «Показать».
Мы заходим на страницу и кликаем по кнопке «Показать» — появляется модальное окно с картой
При нажатии на кнопку «Закрыть» — окно закрывается.
Рассмотрим код примера.
В самом начале html-файла в разделе HEAD мы подключаем JavaScript-библиотеку jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
А затем файлы CSS-стилей и JS фреймворка Twitter Bootstrap
<link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/bootstrap.min.js"></script> |
Далее API Google Maps API (V3)
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> |
Добавляем немного стилей для модального окна с картой
<style>
#myModal label { width: auto!important; display:inline!important; }
#myModal img { max-width: none!important; }
#mapcanvas {width:520px; height:400px}
#mapcanvas label { width: auto!important; display:inline!important; }
#mapcanvas img { max-width: none!important; }
</style> |
Далее подключаем скрипт для поддержки функций HTML5 в браузерах IE версий 6 — 8
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> |
В разделе BODY мы размещаем код для кнопки и модального окна
<!-- Кнопка -->
<p><a href="#myModal" role="button" data-toggle="modal" class="btn btn-primary">Показать</a></p>
<!-- Модальное окно -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Нижегородский театр «Комедія»</h3>
</div>
<div class="modal-body">
<div id="mapcanvas"></div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Закрыть</button>
</div>
</div> |
И в самом конце JavaScript-код для формирования и вывода карты.
myLatlng = new google.maps.LatLng(56.32039899999999,44.002245000000016);
centerLatlng = new google.maps.LatLng(56.32039899999999,44.002245000000016);
//start of modal google map
$("#myModal").modal({
show: false
}).on("shown", function()
{
var map_options = {
zoom: 17,
mapTypeControl: false,
center:centerLatlng,
panControl:false,
rotateControl:false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), map_options);
var contentString = '<div id="mapInfo">'+
'<p><strong>Нижегородский театр «Комедія»</strong><br>'+
'г.Нижний Новгород, ул. Грузинская, д. 23</p>'+
'<a rel="nofollow" href="http://comedia.nnov.ru/" target="_blank">Перейти на сайт</a>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Нижегородский театр «Комедія»",
maxWidth: 200,
maxHeight: 200
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
}); |
В начале мы задаем координаты центра карты centerLatlng и позицию маркера myLatlng.
Затем, если модальное окно открыто определяем начальные параметры карты, добавляем на нее маркер и открываем балун с информацией.
Второй пример — это показ местоположения нескольких мест на одной странице в модальнм окне.
Мы заходим на страницу и видим список кинотеатров
При клике по одной из ссылок в колонке «Расположение» — показывается модальное окно с указанием местоположения данного кинотеатра.
Код примера отличается от предыдущего.
В начале раздела BODY мы размещаем код таблицы со ссылками и модального окна
<table class="table table-condensed">
<thead>
<tr>
<th>Кинотеатр</th>
<th>Расположение</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Синема Парк в ТЦ «Фантастика»</strong></td>
<td><i class="icon-map-marker"></i> <a class="openmodal" href="#mapmodals" role="button" data-toggle="modal" data-id="Синема Парк в ТЦ «Фантастика»">ул. Родионова, 187</a></td>
</tr>
<tr>
<td><strong>Синема Парк DeLuxe IMAX в ТЦ «Седьмое небо»</strong></td>
<td>
<i class="icon-map-marker"></i> <a class="openmodal" href="#mapmodals" data-id="Синема Парк DeLuxe IMAX в ТЦ «Седьмое небо»" role="button" data-toggle="modal">ул. Бетанкура 1</a>
</td>
</tr>
<tr>
<td><strong>Синема СТАР в ТЦ «Рио»</strong></td>
<td>
<i class="icon-map-marker"></i> <a class="openmodal" href="#mapmodals" data-id="Синема СТАР в ТЦ «Рио»" role="button" data-toggle="modal">Московское шоссе, 12</a>
</td>
</tr>
</tbody>
</table>
<!-- MAPS -->
<div class="modal hide fade" id="mapmodals">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">Закрыть</button>
<div id="map_canvas" style="width:530px; height:300px"></div>
</div>
<div class="modal-footer">
<h3 id="myCity"></h3>
</div> |
Далее JavaScript-код для формирования и вывода карты.
При открытии модального окна по ссылке, мы получаем ее data-id
var myMapId = $(this).data('id'); |
И в зависимости от полученного параметра, вызываем функцию mapsDisplay, передавая в нее соответствующие параметры.
А эта функция формирует карту Google Maps с маркером в нужной точке.
Для корректного отображения карты, вызывается событие resize
$('#mapmodals').on('shown', function () {
google.maps.event.trigger(map, 'resize');
map.setCenter(new google.maps.LatLng(longs, latts));
}) |
Надеюсь эти примеры помогут Вам в реализации проектов совместного использования API Google Maps API V3 и Twitter Bootstrap.
При написании заметки использовался код примеров из статьи «Bootstrap and Google Maps API (V3)».