title: Markers are not shown on leaflet map
body: <p>I am working on a task in which I have to show coordinates from an API.
  Currently i am successfully able to fetch the data. But when I show it on the Map, Markers are not visible.
  When i look in console the following errors appears:-</p>
  
  <blockquote>
    <p>Uncaught (in promise) TypeError: Cannot read property 'data' of undefined at eval</p>
  </blockquote>
  
  <p>I have individually tried to pin point the source of error by putting console.log("done") at regular intervals and the exception occurs after the following line in my code:
      this.map.addLayer(this.markers);
  I have marked this line using comment in my code.</p>
  
  <p>here's what i put in my html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="mapApp"&gt;
      &lt;div class="container-fluid" style="padding: 0px; position: 
          relative; min-height: 90vh"&gt;
      &lt;div id="map" class="map"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here's my Full JavaScript File</p>
  
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue'
  import axios from 'axios'
  import L from 'leaflet'
  import googleMutant from 'leaflet.gridlayer.googlemutant'
  import markercluster from 'leaflet.markercluster'
  
  
  const baseUrl = 'http://127.0.0.1:8000/';
  
  const vm = new Vue({
  el: '#mapApp',
  data: {
      map: null,
      tileLayer: null,
      layers: [],
      properties: [],
      panState: 'closed',
      foodIconUnselected: null,
      foodIconSelected:null,
      realEstateIconUnselected:null,
      realEstateIconSelected:null,
      zoomlevel:8,
      firstLatitude:null,
      firstLongitude:null,
      roadMutant:null,
      markers:null,
      allPropertyLayer:null,
      mcdPropertyLayer:null,
      subwayPropertyLayer:null,
      burgerkingPropertyLayer:null,
      chickeriaPropertyLayer:null,
      starbucksPropertyLayer:null,
      kfcPropertyLayer:null,
      spettacoloPropertyLayer:null,
      holycowPropertyLayer:null,
      query:'',
      iconLabel:null,
      labelName:null,
  
  
  },
  
  created(){
     // execute the method to fetch propertis
      let searchParams = new URLSearchParams(window.location.search);
  
      let search_term_value = searchParams.get("search_term")
      this.fetchPropertyData(search_term_value);
  
  
  },
  methods: {
  
      initMap() {
  
          this.$data.map = L.map('map').setView([this.$data.firstLatitude, this.$data.firstLongitude], this.$data.zoomlevel);
          this.$data.roadMutant = L.gridLayer.googleMutant({
              maxZoom: 24,
              type: 'roadmap',
              styles: /*removed on purpose to reduce size */,
          }).addTo(this.$data.map);
  
          L.control.zoom({
              position:'topright'
          }).addTo(this.$data.map);
  
          this.$data.markers =  L.markerClusterGroup({
  
                  iconCreateFunction: function (cluster) {
                  var markers = cluster.getAllChildMarkers();
                  var html = '&lt;div class="marker-cluster"&gt;' + markers.length + '&lt;/div&gt;';
                  return L.divIcon({html: html, className: 'mycluster', iconSize: L.point(40, 40)});
              },
              spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: true,
  
              });
          this.$data.allPropertyLayer = new L.FeatureGroup();
          this.$data.mcdPropertyLayer = new L.FeatureGroup();
          this.$data.subwayPropertyLayer = new L.FeatureGroup();
          this.$data.burgerkingPropertyLayer = new L.FeatureGroup();
          this.$data.chickeriaPropertyLayer = new L.FeatureGroup();
          this.$data.starbucksPropertyLayer = new L.FeatureGroup();
          this.$data.kfcPropertyLayer = new L.FeatureGroup();
          this.$data.spettacoloPropertyLayer = new L.FeatureGroup();
          this.$data.holycowPropertyLayer = new L.FeatureGroup();
          console.log("Done Till Here");
          this.fillDataInMap();
      },
      fillFirstData(){
        this.$data.firstLatitude = this.$data.properties[0].latitude;
        this.$data.firstLongitude = this.$data.properties[0].longitude;
      },
      fetchPropertyData(search_term_value){
  
          const self = this;
          axios.get(baseUrl + 'api/search/property', {
              params:{
                  'search_term': search_term_value
              }
          }).then(function (response) {
              self.$data.properties = response.data.search_results.data;
              self.fillFirstData();
              self.initMap();
  
          }).catch(function (error) {
              alert(error.response.data);
              console.log(error);
          })
      },
  
      fillDataInMap(){
  
  
          for(let i =0;i&lt;this.$data.properties.length;i++){
  
              this.$data.iconLabel = this.getPropertyIconLabelUnSelected(this.$data.properties[i]);
              this.$data.labelName = this.getPropertyLabelName(this.$data.properties[i]);
  
  
              let marker = L.marker(new L.LatLng(this.$data.properties[i].latitude, this.$data.properties[i].longitude), {icon: this.$data.iconlabel, id: i+1});
  
              marker.bindTooltip(this.$data.labelName, {permanent: true, direction: 'auto', className: 'map-icon-label',});
              marker.bindPopup(this.$data.properties[i].address);
  
              marker.title = this.$data.properties[i].id;
  
              marker.on('click', function (e) {
                  //showDetails(e, e.target.title);
                  //changeMarkerIconOnClick(e);
  
              });
              marker.on('mouseover',function (e) {
                  e.target.openPopup();
  
              });
              marker.on('mouseout',function (e) {
                  e.target.closePopup();
              });
              this.$data.allPropertyLayer.addLayer(marker);
              this.addMarkerToRespectiveLayer(this.$data.properties[i].property_sub_type,marker);
  
        }
  
          this.$data.markers.addLayer(this.$data.allPropertyLayer);
  </code></pre>
  
  <p><strong>Next line throws the exception</strong></p>
  
  <pre><code>        this.map.addLayer(this.markers);
  
      },
      searchWithQuery(){
          this.fetchPropertyData(this.$data.query)
      },
  
      showPropertyDetails(id) {
          alert('property id is: ' + id)
      },
    }
  });
  </code></pre>