Кластеризация отметок на карте Google в «Битрикс»

Когда количество меток на интерактивной карте переваливает за два десятка, толку от нее становится мало. Все пространство карты получается утыкано флажками объектов так, что собственно карты уже и не видать. Решается эта задача через кластеризацию с показом групп флажков отдельными значками и выноской количества. Пошаговая реализация такого способа перед вами.

 
1. Создаем новостную страницу

Визуальным редактором создаем новую страницу, подключаем шаблон комплексного компонента news.

2. Свойство инфоблока «привязка к карте»

Зайдя в свойства инфоблока, создаем новый тип «привязка к карте Google Maps». Зададим ему код, допустим «MAP».

3. Кастомизируем компонент шаблона

Находим файл компонента подключенного к странице шаблона news.list с именем template.php. Заменяем весь код на приведенный ниже:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<div class="news-list">
<?$arProperty = $arResult["DISPLAY_PROPERTIES"];
$PLACEMARKS = array();
$i=0;
foreach($arResult["ITEMS"] as $arElement)
{
foreach ($arElement["DISPLAY_PROPERTIES"] as $pid=>$arProperty)
{
if($pid=="MAP")      $MAP = explode (",", $arProperty["VALUE"]);
$TEXT ="<table>".
"<tr>".
"<td>".
"<img src="".$arElement["PREVIEW_PICTURE"]["SRC"]."" />".
"</td>".
"<td>".
$arElement["NAME"]."<br/>".  
$arElement["PROPERTIES"]["PHONE"]["VALUE"]."<br/>".
"<a href="".$arElement["DETAIL_PAGE_URL"] ."">Подробнее</a>".
"</td>".
"</tr>".
"</table>";
$PLACEMARKS[$i]["LON"] = $MAP[1]; //Заполняем массив маркера данными
$PLACEMARKS[$i]["LAT"] = $MAP[0];
$PLACEMARKS[$i]["TEXT"] = $TEXT; 
}
$i++;
}

$APPLICATION->IncludeComponent("bitrix:map.google.view", "gmap-montag", Array(
"INIT_MAP_TYPE" => "MAP",   // Стартовый тип карты
"MAP_DATA" => serialize(
array(
"google_lat"=>$MAP[0],    
"google_lon"=>$MAP[1],
"google_scale"=>6,
"PLACEMARKS"=>$PLACEMARKS)),// Данные выводимые на карте
"MAP_WIDTH" => "AUTO",   // Ширина карты
"MAP_HEIGHT" => "600",   // Высота карты
"CONTROLS" => array(   // Элементы управления
0 => "SMALL_ZOOM_CONTROL",
1 => "TYPECONTROL",
2 => "SCALELINE",
),
"OPTIONS" => array(   // Настройки
0 => "ENABLE_SCROLL_ZOOM",
1 => "ENABLE_DBLCLICK_ZOOM",
2 => "ENABLE_DRAGGING",
3 => "ENABLE_KEYBOARD",
),
"MAP_ID" => "",   // Идентификатор карты
),
false,
array(
"ACTIVE_COMPONENT" => "Y"
)
);?>  
</div>

4. Кастомизируем шаблон карты

Находим файл шаблона карты, в нашем случае он находится здесь

bitrix/templates/мое_имя_шаблона/components/bitrix/map.google.view/gmap-montag/template.php

Заменяем код в template.php на собственный

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();?>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<style type="text/css">
#map-container { padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 800px;
}

   #map { width: auto;
height: 600px;
}
</style>

<div id="map-container"><div id="map"></div></div>
<?if (is_array($arResult['POSITION']['PLACEMARKS']) && ($cnt = count($arResult['POSITION']['PLACEMARKS']))):?>
<script type="text/javascript">
function PrepareMarkers()    //подготовка точек для роботы в JS
{
points = [];
<?for($i = 0; $i < $cnt; $i++):?>
points [<?=$i?>]=<?echo CUtil::PhpToJsObject($arResult['POSITION']['PLACEMARKS'][$i])?>;
<?endfor;?>
return points;
};

$(document).ready(
function () {
initialize();
return true;
});
</script>
<?endif;?>

5. Кастомизируем script.js

Вводим в script.js собственный код:

var map;
function initialize()
{
var center = new google.maps.LatLng(48.35, 31.4);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow({
content: "" 
});



var Klaster = PrepareMarkers();
var dots = [];
for ( var i = 0; i<Klaster.length; i++)
{
var baloon = Klaster[i].TEXT;
var marker = add_marker(Klaster[i].LAT, Klaster[i].LON, baloon); //лирическое отступление, когда писал перепутал
dots.push(marker);                            //LAT и LON местами, точки выводились в саудовской аравии, 
}                                        // лопатил код, пока случайно не уменьшил масштаб:(
var markerCluster = new MarkerClusterer(map, dots);

}

function add_marker(LAT, LON, TEXT) {

var infowindow = new google.maps.InfoWindow({
content: TEXT
});

var marker = new google.maps.Marker({
position: new google.maps.LatLng(LAT, LON),
map: map
});

google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});

return marker;
}

 

Готово!

-------------------------------
Спасибо за внимание!
Читайте свежий выпуск «Кладовки программиста» каждый день!

Назад в раздел