How to pass coordinates and label names from DOM to GoogleMaps?

Question

JavaScript

There is a list that PHP generates and displays on the page. How to loop through this list in JS and display it as marks on the map?

<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

Used gmaps.js plugin

$('.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

Why would you need to parse the dom when you already have an array that can be passed to js?

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