Используем Google Maps в модальном окне Twitter Bootstrap

Автор: | 15.05.2013

В последнее время множество разработчиков веб-сайтов используют для своих проектов 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) — показываем модальное окно с картой при клике на кнопке «Показать».

Посмотреть пример в действии

Мы заходим на страницу и кликаем по кнопке «Показать» — появляется модальное окно с картой

Одна карта Google Map в Bootstrap Modal

При нажатии на кнопку «Закрыть» — окно закрывается.

Рассмотрим код примера.

В самом начале 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">&times;</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.

Затем, если модальное окно открыто определяем начальные параметры карты, добавляем на нее маркер и открываем балун с информацией.

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

Посмотреть пример в действии

Мы заходим на страницу и видим список кинотеатров

Список кинотеатров

При клике по одной из ссылок в колонке «Расположение» — показывается модальное окно с указанием местоположения данного кинотеатра.

Google Map в Bootstrap Modal

Код примера отличается от предыдущего.

В начале раздела 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)».

Загрузить архив с файлами примера

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *