APIを使った埋め込みGoogleマップの中心の位置をphpの配列から取得したい

Question

実現したいこと

「APIを利用したGoogleマップ」を表示させるjsファイルを作成しました。
そのファイル内のマップのデフォルト中心地を記述するところに別で作成したphpファイルの配列の値を呼び出して代入したい

発生している問題・分からないこと

jsファイル内に記述した以下
center: {
lat: <?php echo $map_center['lat']; ?>,
lng: <?php echo $map_center['lng']; ?>,
},
のところに
別phpファイルに記述した配列内の
'lat' => '33.XXXXXXXX',
'lng' => '130.XXXXXXXX',
上記の緯度・経度を代入したい
※Xは実際には数字が入ります。

該当のソースコード

// 縮尺
$map_zoom = "<?php echo $map_zoom; ?>";
var Zoom = Number($map_zoom);

// マップ作成 ___________________________________________________________
function initMap() {
var map = new google.maps.Map(document.getElementById('Map'), {
zoom: Zoom, // 地図のズームを指定
mapTypeControl: false, //マップタイプ コントロール
fullscreenControl: false, //全画面表示コントロール
streetViewControl: false, //ストリートビュー コントロール
zoomControl: true, //ズーム コントロール
gestureHandling: "greedy", // PC：スクロールでズーム、 モバイル：指1本のスクロールで地図移動
center: {
  lat: <?php echo $map_center['lat']; ?>,
  lng: <?php echo $map_center['lng']; ?>,
  },
});

<?php
## 地図の最初の中心点 ##
$map_center = [
'lat' => '33.XXXXXXXX',
'lng' => '130.XXXXXXXX',
];
## 地図の縮尺設定 ##
$map_zoom = 12;

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

・添付画像の通り『 lng: <?php echo $map_center['lng']; ?>,』の部分の色分けがおかしくなるが、原因がわからない
・jsを圧縮しなければなぜか動く
・圧縮すると動かなくなる(ラッコツールズのサイトで圧縮)

・地図の縮尺の数値は問題なく呼び出されている
・center: {
lat: <?php echo $map_center['lat']; ?>,
lng: <?php echo $map_center['lng']; ?>,
},
の記述のところを、
center: {
lat: 33.XXXXXXXX,
lng: 130.XXXXXXXX,
},
のように直接数値を入れた場合には問題なく動く

補足

・atomを利用している
・phpとjsのファイルは別ファイル

Answer 1

ラッコツールズのJavaScript圧縮を試したところ、圧縮前後で

center: {
  lat: <?php echo $map_center['lat']; ?>,
  lng: <?php echo $map_center['lng']; ?>,
  },

↓

center:{lat:<?php echo $map_center.lat;?>,lng:<?php echo $map_center.lng;?>,},

となっています。echo $map_center.lat;は正しいPHPの文法ではない(手元のPHP 8.1.24では動作しない)ので、その部分だけ手修正しましょう(動作未確認)。

center:{lat:<?php echo $map_center['lat'];?>,lng:<?php echo $map_center['lng'];?>,},

Comments

[saekoaaa]

その部分だけ手入力で修正し、動作確認できました。
ご教授いただき、誠にありがとうございます。