Все выводит хорошо, но проблема в полной "нечитаемости" такой карты, нужно как то подключить кластеризацию, интуитивно понимаю что нужно сделать изменения в шаблоне map.google.view но вот что да как..
Может кто сталкивался с проблемой, или может подсказать решение? Скрин моей карты:
Алексей Косоротов, спасибо за материал, помог разобраться)
Если кому нужно на будущее, ниже выкладываю пошагово свои действия.. Начнем с задачи: нужно вывести на карту информацию о сети монтажных сервисов в Украине, позиций будем немало, для читаемости такой карты необходимо реализовать кластеризацию. При выборе конкретного маркера в балуне точки нужно разместить фотографию, информацию о монтажах, городе и добавить ссылку на страницу детального просмотра. Для реализации почерпнул информацию тут, тут и тут . Итак, собственно, реализация:
1. Создаем новую страницу, в визуальном редакторе подключаем к ней свой шаблон комплексного компонента news. 2. В свойствах инфоблока добавляем новый тип "привязка к карте Google maps", задаем ему код (у меня "MAP" . 3. В компоненте news нашего шаблона, кастомизируем компонент news.list, для этого убираем в template.php весь код и вместо него добавляем свой:
Замечу, что вместо стандартного maps.google.view я подключил свой собственный (это важно, так как при детальном просмотре у меня также отображается положение конкретного монтажа на карте, там уже используется стандартный компонент). 4. Затем идем в наш шаблон карты (у меня это bitrix/templates/мое_имя_шаблона/components/bitrix/map.google.view/gmap-montag) От файла template.php оставил только рожки да ножки, собственно мне только и нужна была функция вывода точек.
Как видите я подключил три 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;
}
Вот и все, у нас есть теперь карта на которой реализована кластеризация.
P.S. Этот способ скорее для новичков (кем собственно я и являюсь). Буду рад критике и идеям о других возможных способах реализации:)