Задать вопрос
@Sky161
Начинающий Web-разработчик
javascript

Как передать из DOM координаты и названия меток в GoogleMaps?

Есть список который формирует PHP и выводит на странице. Как в JS перебрать этот список и вывести как отметки на карте?
<ul class="point">
                    <li data-name="Алматы" data-url="/dilery/almaty/" data-coordinat="">
                                    <p>Алматы элемент</p>
                            </li>
                    <li data-name="Астана" data-url="/dilery/astana/" data-coordinat="">
                                    <p>Астана элемент</p>
                            </li>
                    <li data-name="Ростов-на-Дону" data-url="/dilery/rostov-na-donu/" data-coordinat="47.234440, 39.701128">
                                    <p>ООО «Автовариант» и ООО «Автохолод»</p>
                                    <p>ООО «Горизонт»</p>
                                    <p>«Холодильные Технологии»</p>
                                    <p>ООО «СпеЦ-Авто»</p>
                                    <p>ООО «Висма»</p>
                            </li>
            </ul>


/*Google Maps*/
	if($('#gomap').length) {
	$("#gomap").gmap3({
          marker:{
          	values:[
		      { latLng: [55.02480160288231, 82.92944544445794], 
		      	data:'<div class="baloon-innr"><h3>Москва</h3><p>ООО «Автовариант» и ООО «Автохолод»</p><p>ООО «Горизонт»</p><p>«Холодильные Технологии»</p><p>ООО «СпеЦ-Авто»</p><p>ООО «Висма»</p><a href="#">Контактная информация</a></div>'
		      },
		      { latLng: [55.75399400, 37.62209300], 
		      	data:'<div class="baloon-innr"><h3>Москва</h3><p>ООО «Автовариант» и ООО «Автохолод»</p><p>ООО «Горизонт»</p><p>«Холодильные Технологии»</p><p>ООО «СпеЦ-Авто»</p><p>ООО «Висма»</p><a href="#">Контактная информация</a></div>'
		      },
		      { latLng: [56.97048954, 35.72145823], 
		      	data:'<div class="baloon-innr"><h3>Москва</h3><p>ООО «Автовариант» и ООО «Автохолод»</p><p>ООО «Горизонт»</p><p>«Холодильные Технологии»</p><p>ООО «СпеЦ-Авто»</p><p>ООО «Висма»</p><a href="#">Контактная информация</a></div>'
		      },
		      { latLng: [54.79760329, 37.65505198], 
		      	data:'<div class="baloon-innr"><h3>Москва</h3><p>ООО «Автовариант» и ООО «Автохолод»</p><p>ООО «Горизонт»</p><p>«Холодильные Технологии»</p><p>ООО «СпеЦ-Авто»</p><p>ООО «Висма»</p><a href="#">Контактная информация</a></div>'
		      },
		    ],
          	
          	options:{
              draggable:false,
              icon: new google.maps.MarkerImage("/bitrix/templates/main/img/icon-marker.png", new google.maps.Size(12, 13, "px", "px")),
            },
            events:{
            	click: function(marker, event, context){
		        var map = $(this).gmap3("get"),
		          infowindow = $(this).gmap3({get:{name:"infowindow"}});
		        if (infowindow){
		          infowindow.open(map, marker);
		          infowindow.setContent(context.data);
		        } else {
		          $(this).gmap3({
		            infowindow:{
		              anchor:marker, 
		              options:{content: context.data}
		            }
		          });
		        }
		      },
      
            },
            
          },
          map:{
            options:{
              center:[55.02480160288231, 82.92944544445794],
              zoom: 4,
              scrollwheel: false,
              mapTypeControl: false,
              panControl: false,
              streetViewControl: false,
              zoomControl: true,
			  zoomControlOptions: {
			  	style: google.maps.ZoomControlStyle.SMALL,
			   	position: google.maps.ControlPosition.RIGHT_BOTTOM
			 },
            }
          }
        });
        
      }
  • Вопрос задан
  • 469 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 1
@Sky161 Автор вопроса
Начинающий Web-разработчик
Использовал плагин gmaps.js

$('.dealers-map .point li').each(function(){
        var coordinat = $(this).data('coordinat');
        var urlPath = $(this).data('url');
        var name = $(this).data('name');
        var idItem = $(this).data('id');
        var arrCoordinat = coordinat.split(',');
        var itemArr = [];
        
        $(this).find('p').each(function(){
          var item = $(this).text();
          
          itemArr.push('<p>'+item+'</p>');
        });
        var items = itemArr.join('');
        
        // создаю маркер, сохраняю ссылку в переменную
        var marker = map.addMarker({
          lat: arrCoordinat[0],
          lng: arrCoordinat[1],
          title: 'bx-id-'+idItem,
          icon: '/bitrix/templates/main/img/icon-marker.png',
          infoWindow: {
            content: '<div id="bx-id-'+idItem+'" class="baloon-innr"><h3>'+name+'</h3>'+items+'<a href="'+urlPath+'">Контактная информация</a></div>'
          }
        });

         // добавляю маркер на карту
         map.addMarker(marker);

         // добавляю ссылку на маркер в объект
         mapMarkers[idItem ] = marker;
      });
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
matroskin13
@matroskin13
JavaScript developer, GO developer
Зачем вам парсить dom, когда у вас уже есть массив, который можно передать в js?
<script>
var markers = <?=$this->markers?>
</script>
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Написать посты на игровую тематику (PlayStation) Telegram, VK
25 апр. 2024, в 16:21
15000 руб./за проект
DevOps настройка Gitlab CICD для проекта c CF Worker
25 апр. 2024, в 16:12
2000 руб./за проект
DevOps
25 апр. 2024, в 16:08
100000 руб./за проект
Ещё заказы