Why are I.Maps not showing up?

Question

JavaScript

Hello. Task: pull the coordinates of a point from the database and display the point on Yandex. Maps. Here's a script:

<script src="//api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
            <script type="text/javascript">
                ymaps.ready(init);

                function init() {
                    
                    var coord = "<?=$data['coords'];?>";
                    // var coord = "58.6103,49.6917"; - данные получаю из базы
                    var myMap = new ymaps.Map('map', {
                        center: [coord],
                        zoom: 9,
                        controls: ['zoomControl']
                    });
                       
                    var myPlacemark = new ymaps.Placemark(coord, {
                        iconContent: '<? echo $data['address']; ?>',
                        balloonContent: '<? echo $data['title']; ?>'
                    }, {
                        preset: 'twirl#violetStretchyIcon'
                    });

                    myMap.geoObjects.add(myPlacemark);
                }
            </script>

As a result, only the balloon is displayed, but the map itself and the zoomController are not loaded. Where did I make a mistake?

Answer 1

The variable coord is a string:
An array is expected in center , but a string is passed as an array element:

var myMap = new ymaps.Map('map', {
  center: [coord],
  zoom: 9,
  controls: ['zoomControl']
});

You can split by comma:

var coord = "58.6103,49.6917".split(',');
// var coord = "<?=$data['coords'];?>".split(',');

And pass the coord as is:

var myMap = new ymaps.Map('map', {
        center: coord,
        zoom: 9,
        controls: ['zoomControl']
});

See example .
Or immediately, pass an array, not a string, to the script:
var coord = [<?=$data['coords']?>];

Answer 2

I want to add to the answer of Alexey Nemiro , try never to mix js and php code together again, and keep their points of contact to a minimum.
Here is an example of how one could do this without turning the code into noodles from two languages:

// Этот скрипт теперь вообще можно вынести в отдельный js файл
<script type="text/javascript">
function initYmaps(params) {
    ymaps.ready(function() {
        var coord = params['coords'];
        var myMap = new ymaps.Map('map', {
            center: [coord],
            zoom: 9,
            controls: ['zoomControl']
        });
           
        var myPlacemark = new ymaps.Placemark(coord, {
            iconContent: params['address'],
            balloonContent: params['title']
        }, {
            preset: 'twirl#violetStretchyIcon'
        });

        myMap.geoObjects.add(myPlacemark);
    });
}
</script>

<script type="text/javascript">
initYmaps(<?php echo json_encode(array(
    'coords' => $data['coords'],
    'address' => $data['address'],
    'title' => $data['title'],
))?>);
</script>