Reputation: 45

Delete Marker From Google Map

Im sorry if this is a really simple one and im being dumb but I have got some code here and i'm pulling data from MYSQL and placing the markers in the map. I have the markers positions changing, so I want to update the markers positions without reloading the page. All working however I can't get the previous markers to delete before placing the new marker.

As you can see in my code I have tried to even place a button (not what I need but just to see if I can get it to work) to clear the markers and thats not even working.

Any help would be greatly appreciated :)

Here is my Code:

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>vRAF Link 16 Map</title>
        <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

       #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        //<![CDATA[
        var markers = [];
        setInterval(function () {
            DeleteMarkers();
            Link16_2();
        }, 5000);

      function DeleteMarkers() {
            //Loop through all the markers and remove
            for (var i = 0; i < markers.length; i++) {
                markers[i].setMap(null);
            }


            markers = [];
        };   

        var customIcons = {
            bar: {
                icon: 'http://map.vraf.net/icon.png'
            }

        };

        var map = null;
        var infoWindow = null;
        function load() {
            map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(54.559322, -4.174804),
            zoom: 6,
            mapTypeId: 'satellite'
            });


            infoWindow = new google.maps.InfoWindow;

            // Change this depending on the name of your PHP file
            Link16_2();
        }

        function Link16_2() {    
              // Change this depending on the name of your PHP file
              downloadUrl("genxml_link16.php", function(data) {
                var xml = data.responseXML;
                var markers = xml.documentElement.getElementsByTagName("marker");

                for (var i = 0; i < markers.length; i++) {

                  var name = markers[i].getAttribute("name");
                  var callsign = markers[i].getAttribute("callsign");
                  var symbol = markers[i].getAttribute("symbol");

                  var point = new google.maps.LatLng(
                      parseFloat(markers[i].getAttribute("lat")),
                      parseFloat(markers[i].getAttribute("lon")));

                  var html = "<b>" + callsign + "</b> <br/>" + name;
                  var icon = customIcons[symbol] || {};
                  var marker = new google.maps.Marker({
                    map: map,
                    position: point,
                    icon: icon.icon
                  });

                   markers.push(marker);


                  bindInfoWindow(marker, map, infoWindow, html);
                }
              });
            }

        function bindInfoWindow(marker, map, infoWindow, html) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
        }

        function downloadUrl(url, callback) {
            var request = window.ActiveXObject ?
                new ActiveXObject('Microsoft.XMLHTTP') :
                new XMLHttpRequest;

            request.onreadystatechange = function () {
                if (request.readyState == 4) {
                    request.onreadystatechange = doNothing;
                    callback(request, request.status);
                }
            };

            request.open('GET', url, true);
            request.send(null);     
        }

        function doNothing() { }


        //




        //HOT KEYS

      // Removes the markers from the map, but keeps them in the array.
      function clearMarkers() {
        setMapOnAll(null);
      }

      // Shows any markers currently in the array.
      function showMarkers() {
        setMapOnAll(map);
      }

      // Deletes all markers in the array by removing references to them.
      function deleteMarkers() {
        clearMarkers();
        markers = [];
      }

      // Deletes all markers in the array by removing references to them
      function deleteOverlays() {
        if (markers) {
        for (i in markers) {
        markers[i].setMap(null);
      }
        markers.length = 0;
      }
}

</script>

  </head>

  <body onload="load()">    

    <div id="floating-panel">
      <input onclick="clearMarkers();" type=button value="Hide Markers">
      <input onclick="showMarkers();" type=button value="Show All Markers">
      <input onclick="deleteOverlays();" type=button value="Delete Markers">
    </div>
    <div id="map">

    </div>
  </body>

</html>

Upvotes: 1

Answers (1)

geocodezip

Reputation: 161334

You have two arrays called markers, one an array of XML elements that is local to the downloadUrl function and the global array of what you probably wanted to be google.maps.Marker objects. Give them different names.

var gmarkers = [];

Inside downloadUrl:

gmarkers.push(marker);

And DeleteMarkers:

function DeleteMarkers() {
  //Loop through all the markers and remove
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setMap(null);
  }
  gmarkers = [];
};

proof of concept fiddle

Upvotes: 1

Delete Marker From Google Map

Answers (1)

Related Questions