title: Nuxt js: Google maps markers wont show and loop is not working
body: <p>I have a function that loops over an object to populate the markers. But when I do run the code, the loop is not working. Also when I do <code>console.log</code>, it is not showing me anything even in Vue DevTools. I am not using any Vue packages for the Google map. I just followed the documentation, and wrote the vanilla JavaScript functions.</p>
  <p>Here is the whole function:</p>
  <pre class="lang-js prettyprint-override"><code>export default {
      layout:'adminLte',
      data(){
          return{
              address:{
                  lat:7.0650673,
                  lng:125.5961476
              },
              clinic:[],
              markersInfo:[],
          }
      },
      methods:{
          loadScript() {
              if (window.google &amp;&amp; window.google.maps) {
                  this.initMap();
                  return;
              }
              var self = this;
              var script = document.createElement(&quot;script&quot;);
              script.onload = function() {
                  if (!window.google &amp;&amp; !window.google.maps)
                      return void(console.error(&quot;no google maps script included&quot;));
                  self.initMap();
              };
              script.async = true;
              script.defer = true;
              script.src = &quot;https://maps.googleapis.com/maps/api/js?key=APIKEY&amp;libraries=geometry&quot;;
              document.getElementsByTagName(&quot;head&quot;)[0].appendChild(script);
          },
          initMap(){
  
              var center = new google.maps.LatLng(this.address.lat, this.address.lng)
              const map = new google.maps.Map(document.getElementById('map'), {
                  zoom: 13,
                  center: center
              })
      
              //this are for the markers. even if i console log below. it wont show anything
              for (var i = 0; i &lt; this.clinic.length; i++) {
                  var clinicLat = this.clinic.data[i].lat;
                  var clinicLng = this.clinic.data[i].lng;
                  var details = this.clinic.data[i].name;
                  var latLng = new google.maps.LatLng(clinicLat,clinicLng);
                  console.log(details)
                  var markers = new google.maps.Marker({
                      position: latLng,
                      map: map,
                      icon: {
                          url: &quot;http://maps.google.com/mapfiles/ms/icons/yellow-dot.png&quot;
                      },
                      size: new google.maps.Size(20, 20),
                  });
                  const contentString = '&lt;div id=&quot;content&quot;&gt;&lt;p&gt;' + details + '&lt;/p&gt;&lt;/div&gt;';
                  //for Info windows function
                  console.log('Markers' + markers)
                  this.infoWindowShow(markers, contentString);
                  this.markersInfo.push(markers)
              }
        
          },
          infoWindowShow(markers, contentString) {
              var infowindow = new google.maps.InfoWindow({
                  content: contentString
              });
              markers.addListener('click', function() {
                  infowindow.open(markers.get('map'), markers);
              });
          },
          showMarker(id) {
              google.maps.event.trigger(this.markersInfo[id], 'click');
          },
          getClinicsList(){
                firebase.database().ref('clinics').on('value',(snapshot)=&gt;{
                  this.clinic = snapshot.val()
                  console.log(snapshot.val())
                  this.loadScript()
              })
          },
      },
      created(){
          console.log('created')
          this.getClinicsList()
   
          if (localStorage.getItem(&quot;user-email&quot;) === null) {
           this.$router.push('/login')
          }
      },
      mounted(){
          this.loadScript()
      }
  }
  </code></pre>
  <p>The HTML element for map:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;card-body table-responsive&quot;&gt;
    &lt;div id=&quot;map&quot; style=&quot;width: 1200px; height: 600px;&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>Still the DevTools is empty, but the <code>clinic</code> array has values.
  <a href="https://i.stack.imgur.com/gYirZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gYirZ.png" alt="screenshot" /></a></p>
  <p><a href="https://jsfiddle.net/5rbqs32z/2/" rel="nofollow noreferrer">JSFiddle</a></p>