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

Question

[Андрей Sky]

Есть список который формирует 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
			 },
            }
          }
        });
        
      }

Answer 1

[Андрей Sky]

Использовал плагин 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;
      });

Answer 2

[Валентин Дубровский]

Зачем вам парсить dom, когда у вас уже есть массив, который можно передать в js?

<script>
var markers = <?=$this->markers?>
</script>

Comments

[Андрей Sky]

Массив в самом js, это для примера во время верстки добавили. Задача принять с php или dom данные и вывести их массивом как в примере.

[Валентин Дубровский]

values: markers соедините это с кодом, который я написал выше

[Андрей Sky]

Валентин Дубровский: Можно более подробней? Это все реализуется на битриксе, черещ компонент, а вызов карты через отдельный файл JS. Как и где присвоить PHP массив через JS? Впрниципе смог составить такой же массив через each, HTML элементов:
var arResultURL = [];

$('.point li').each(function(){
var sections = $(this);

arResultURL.push({latLng: [sections.data('coordinat')],
data:''+sections.data('name')+'ООО «Автовариант» и ООО «Автохолод»ООО «Горизонт»«Холодильные Технологии»ООО «СпеЦ-Авто»ООО «Висма»Контактная информация'
});
});
Но следующая проблема. Когда я его передаю в gmap (values:[arResultURL]), ничего не происходит. Каким образом можно передать туда данные?