-3

The idea is to make dynamic markers using google maps API. I want to remove the created markers first before new markers show up. I don't want to make any Arry to manage markers. because I simply want them to be removed without putting them to an array and then delete it from there.

I am calling deleteMarker function inside the loop to do this.

I have used a global variable but I get this error:

TypeError: Mark is undefined[Learn More]

code: 

var map;
var Mark;

//setInterval(function(){ alert("Hello"); }, 3000);
setInterval(ajaxCall, 9000); //300000 MS == 5 minutes

function ajaxCall() {
  $.ajax({
      url: '/maps/my_ajax_request/',
      datatype: 'json',
      type: 'GET',
      success: function (data) {
        for(var prop in data) {
            var item = data[prop];
            console.log(item.latitude,item.longitude, item.icon);

            if (item.icon === "online") {
              selected_status = online;
            } else {
                selected_status = offline;
            } 

            deleteMarker();
            this.Mark = new google.maps.Marker({
              position: {lat: (parseFloat(item.latitude)), lng: (parseFloat(item.longitude))},
              map: map,
              icon: selected_status
            });       
        }
      },

      failure: function(data1) { 
        alert("Got an error dude");
      }
  });
}

function deleteMarker() {
    Mark.setMap(null);
    Mark=null;
}
ssay what
  • 3
  • 3
  • Check if `Mark` exists before accessing its properties. Also, remove `this` when you're creating `Mark`, refer variables using their names. – Teemu Mar 22 '19 at 15:24
  • I recommend adding the line and the column that was displayed with the error to help you get the answer quickly. – Ameen Mar 22 '19 at 16:01
  • 1
    **Moderator Note** - Please [be nice](http://stackoverflow.com/help/be-nice) in the comment section. – Bhargav Rao Mar 23 '19 at 10:47

1 Answers1

-2
var map;
var Mark;

var online = 'https://img.icons8.com/ultraviolet/48/000000/marker.png';
var offline = 'https://img.icons8.com/color/48/000000/marker.png';

setInterval(ajaxCall, 9000); // 300000ms == 5 minutes

function ajaxCall() {
  $.ajax({
    url: '/maps/my_ajax_request/',
    datatype: 'json',
    type: 'GET',
    success: function (data) {
      for(var prop in data) {
        var item = data[prop];
        console.log(item.latitude,item.longitude, item.icon);

        if (item.icon === "online") {
          selected_status = online;
        } else {
          selected_status = offline;
        }

        deleteMarker();

        Mark = new google.maps.Marker({ // no need of use `this` keyword when use as variable
          position: {lat: (parseFloat(item.latitude)), lng: (parseFloat(item.longitude))},
          map: map,
          icon: selected_status
        });
      }
    },

    failure: function(data1) {
      alert("Got an error dude");
    }
  });
}

function deleteMarker() {
  if (Mark) {
    Mark.setMap(null);
    Mark = null;
  }
}
Dexter
  • 2,462
  • 4
  • 24
  • 28
Arjun Singh
  • 302
  • 1
  • 12
  • Thanks it Fixed the error! but I still cant delete the old markers. I get no error. I Think Mark is empty !!!?? – ssay what Mar 22 '19 at 17:11
  • could you share some output you are receiving and output you want to achieve. `selected_status = online;` -> here online is a variable or string? – Arjun Singh Mar 23 '19 at 05:30
  • var online = 'img.icons8.com/ultraviolet/48/000000/marker.png'; var offline = 'img.icons8.com/color/48/000000/marker.png'; AND the output of my_ajax_request is json something like this(4254 44654 online – ssay what Mar 23 '19 at 11:23