CODEWITHSUNDEEP
javascriptjquerygoogle-mapsvue.jsvue-component
Wanderer
Wanderer

Reputation: 705

Google Map Uncaught TypeError: Cannot read property 'firstChild' of null in vue js html?

My json data is

{"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}]}

My vue js code is

addDiv = new Vue({
el: "#addDiv",
  data: {
    id : '<%= id %>',
    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);
            }

            },
        });
},
})

This is my html code

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDcEkMFV_WyhNdZrr8VLaCYOw4FP75u748">
</script>
<div id="addDiv">
 <div id="mapName" class="map" /></div>
</div>

I am getting error as

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.<anonymous> (jquery-3.2.1.min.js:4)

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.

Upvotes: 4

Views: 7026

Answers (1)

M.Reza
M.Reza

Reputation: 11

Check the html again,

<div id="mapName" class="map" /></div>

You should remove / after class="map"

The error occur because Google Maps can't find the id

Upvotes: 1

Related Questions