title: Google Map Uncaught TypeError: Cannot read property 'firstChild' of null in vue js html?
body: <p>My json data is</p>
  
  <pre><code>{"status":true,"data":[{"_id":"5add95c7decc9b1ca03c98ce","source":112479,"info":{"subject":"Tree cutting ","location":{"geo":[76.8228752,9.5274017],"place":"Kottayam "}},"createdAt":"2018-04-23T08:13:59.066Z","accepted":false}]}
  </code></pre>
  
  <p>My vue js code is</p>
  
  <pre><code>addDiv = new Vue({
  el: "#addDiv",
    data: {
      id : '&lt;%= id %&gt;',
      data: [],
    },
    mounted: function() {
   var vm = this;
   data = {};
   data['refId'] = this.id;
           $.ajax({
              url: "http://localhost:3000/record/one/",
              data: data,
              type: "POST",
              dataType: 'json',
              success: function(e) {
              if (e.status == 1) { 
               vm.data = e.data;
               console.log(vm.data);
               var options = { 
   zoom: 16, 
   center: new google.maps.LatLng(e.data[0].info.location.geo[1], e.data[0].info.location.geo[0]), // Centered 
   mapTypeId: google.maps.MapTypeId.ROADMAP, 
   mapTypeControl: false 
   }; 
  
   // Init map 
  var map = new google.maps.Map(document.getElementById('mapName'), options); 
   //use code 
  var i=0;
  
  
   // Init markers 
   var marker = new google.maps.Marker({ 
   position: new google.maps.LatLng(e.data[0].info.location.geo[1], e.data[0].info.location.geo[0]), 
   map: map, 
   title: 'Click Me ' + i, 
   }); 
  
   // Process multiple info windows 
   (function(marker, i) { 
   // add click event 
   google.maps.event.addListener(marker, 'click', function() { 
   infowindow = new google.maps.InfoWindow({ 
  
   }); 
   infowindow.open(map, marker); 
   }); 
   })(marker, i);
              }
  
              },
          });
  },
  })
  </code></pre>
  
  <p>This is my html code</p>
  
  <pre><code>&lt;script async defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDcEkMFV_WyhNdZrr8VLaCYOw4FP75u748"&gt;
  &lt;/script&gt;
  &lt;div id="addDiv"&gt;
   &lt;div id="mapName" class="map" /&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am getting error as</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'firstChild' of null
      at Object._.Sf (js?key=AIzaSyDcEkMFV_WyhNdZrr8VLaCYOw4FP75u748:83)
      at new Wf (js?key=AIzaSyDcEkMFV_WyhNdZrr8VLaCYOw4FP75u748:84)
      at Object.success (7902:464)
      at i (jquery-3.2.1.min.js:2)
      at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
      at A (jquery-3.2.1.min.js:4)
      at XMLHttpRequest.&lt;anonymous&gt; (jquery-3.2.1.min.js:4)
  </code></pre>
  
  <p>This is the error I am getting, I tried many ways and still getting the same, Can anybody please help me to solve the problem. I am not understanding why this error is coming. Please anybody help me to sort out a solution for the problem. </p>