API карт Google, использующий Vue, не отображает маркеры из значения базы данных

Question

У меня есть база данных с соответствующими координатами и названием для нее. Я собираюсь выполнить запрос топора ios. У меня также есть координата c, которая станет центром для нее. Проблема в маркерах для координат из моего api won show. Я даже регистрирую координаты, и это показывает мне правильную. В чем проблема?

Мой метод

 data(){
            return{
                clinics:[],
                property:'',
            }
        },
 methods:{
            initMap(){
                //center
                this.property = {lat: 1.28237, lng: 103.783098};
                // const infowindow = new google.maps.InfoWindow();

                for (var i = 0; i < this.clinics.data.length; i++) {
                    var coords = this.clinics.data[i].coord;
                    console.log(coords['lat'])
                    console.log(coords['lng'])
                    var latLng = new google.maps.LatLng(coords['lat'],coords['lng']);
                    var markers = new google.maps.Marker({
                        position: latLng,
                        map: map
                    });
                }
                const map = new google.maps.Map(document.getElementById('map'), {zoom: 17, center: this.property})
                const circle = new google.maps.Circle({
                    map: map,
                    radius: 200,    
                    fillColor: 'blue',
                    center:{lat: 1.28237, lng: 103.783098}
                }); 
                const marker = new google.maps.Marker({position: this.property, map: map});
            },
        },

пример вывода консоли

app.js:1942 103.9056393
app.js:1941 1.307353803
app.js:1942 103.7845484
app.js:1941 1.334724904

ax ios пример ответа из моего API

{
  "data": [
    {
      "coord": {
        "lat": 1.307476844,
        "lng": 103.7601573
      },
      "clinic": "Chen Clinic"
    },
   ]
}

Что я получил (уменьшил, чтобы показать, что маркеров нет)

Answer 1

Кажется, это маленькая ошибка для меня. Нужно объявить координаты stati c и центр, прежде чем размещать маркеры, чтобы это работало.

 initMap(){
                //center
                this.property = {lat: 1.28237, lng: 103.783098};
                // const infowindow = new google.maps.InfoWindow();

                const map = new google.maps.Map(document.getElementById('map'), {zoom: 17, center: this.property})
                const circle = new google.maps.Circle({
                    map: map,
                    radius: 200,    
                    fillColor: 'blue',
                    center:{lat: 1.28237, lng: 103.783098}
                }); 
                const marker = new google.maps.Marker({position: this.property, map: map});

                for (var i = 0; i < this.clinics.data.length; i++) {
                    var coords = this.clinics.data[i].coord;
                    console.log(coords['lat'])
                    console.log(coords['lng'])
                    var latLng = new google.maps.LatLng(coords['lat'],coords['lng']);
                    var markers = new google.maps.Marker({
                        position: latLng,
                        map: map
                    });
                }

            },