Почему не отображаются Я.Карты?

Question

[AleDv]

Всем привет. Задача: из базы данных дёрнуть координаты точки и вывести точку на Яндекс. Картах. Вот такой скрипт:

<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>

В итоге, отображается только балун, но сама карта и зумКонтроллер не грузятся. Где я допустил ошибку?

Answer 1

[Алексей Немиро]

Переменная coord - строка:

var coord = "<?=$data['coords'];?>";

В center ожидается массив, но передается строка, как элемент массива:

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

Можно сделать split по запятой:

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

И передавать coord как есть:

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

Посмотреть пример.

Или сразу, в скрипт передавать массив, а не строку:

var coord = [<?=$data['coords']?>];

Comments

[AleDv]

Спасибо большое, что-то сразу не сообразил.

Answer 2

[MintTea]

Хочу дополнить ответ Алексей Немиро, постарайтесь больше никогда не смешивать код на js и на php вместе, и сводите точки их соприкосновения к минимуму.

Вот пример, как можно было бы это сделать, не превращая код в лапшу из двух языков:

// Этот скрипт теперь вообще можно вынести в отдельный 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>

Comments

[AleDv]

Спасибо! Действительно, всё аккуратно и понятно.