javascript – How to add a placemark from two php arrays with coordinates to the JS code of the Yandex map label

Question:

I'm trying to add object labels to the Yandex map code. If manually – everything is in order. I can’t figure out how to automatically add the required number of objects having arrays with label data, latitude and longitude. The code for one label looks like this.

velomig = new ymaps.Placemark([55.740005,37.861097], {
    balloonContent: '<img src="/images/MapBannersDealers/velomig.jpg">',
    clusterCaption: 'Веломиг'
}, getPointOptions());

Label name, coordinates, balloon content and cluster signature.

How do I make a loop that iterates over all coordinates from arrays and returns objects with substituted values, something like

for (i = 0, i<longitude.length, i++ ){  
    name[i] = new ymaps.Placemark([longitude[i],latitude[i]],{
        balloonContent: ballon[i],
        clusterCaption: clusterCaprion[i]
    }, getPointOptions());
} 

Answer:

Don't mix PHP and JavaScript, form your array and display it on the page using the standard php function json_encode , something like this:

<?php

$dataArray = [
  [
    'coords' => [55.800434123328664,37.913230695312514],
    'title' => "Метка 1"
  ],
  [
    'coords' => [55.707629064640194,37.469839704628086],
    'title' => "Метка 2"
  ],
  [
    'coords' => [55.64865482240896,37.656607282753086],
    'title' => "Метка 3"
  ],
];

?>

<script type="application/json" id="map-points"><?=json_encode($dataArray)?></script>

The output should look like this:

<script type="application/json" id="map-points">
  [
    {
      "cords":  [55.800434123328664,37.913230695312514],
      "title": "Метка 1"
    },
    {
      "cords":  [55.707629064640194,37.469839704628086],
      "title": "Метка 2"
    },
    {
      "cords":  [55.64865482240896,37.656607282753086],
      "title": "Метка 3"
    }
  ]
</script>

Then pull out that data and loop through it.

A working example is here https://codepen.io/lukas-pierce/pen/xgoYEY

Scroll to Top