How remove marker googlemap $.getjson

Question

i have a big problem!! i put new marker dynamically by $.getJSON but i want also make a function a function for delete all marker on the map. this because i want use this function for delete marker before put dynamically new marker with the function xx3

     <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?keyenter code here=true">
    </script>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      var map;
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(40.76455136505513, -73.98056030273438),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>    
  </head>
  <body onload="initialize()">
  <div id='map-ui'>
    <ul>
        <li><a onclick="javascript:xx3()" id='find here'>FIND HERE</a></li>
        <li><a onclick="javascript:muovi()" id='filter-foodx'>skate</a></li>
        <li><a onclick="javascript:xx4()" id='filter-foodx'>shop</a></li>
        <li><a onclick="javascript:tutto()" class="active" id='filter-alxl'>show all events</a></li>
    </ul>
</div>
    <div id="map_canvas" style="width:100%; height:100%"></div>
    <script type="text/javascript">
      $(document).ready(function() {
        $.getJSON("/vaij.php?la=40.76455136505513&lg=-73.98056030273438", function(json1) {
          $.each(json1, function(key, data) {
            var latLng = new google.maps.LatLng(data.la, data.lg); 
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: latLng,
                title: data.namesp
            });
            marker.setMap(map);
          });
        });
      });
    </script>
    <script>

    function clearMarkers() {
  new google.maps.Marker(null);
}

function muovi() {

      var latLng = new google.maps.LatLng(45.59426285330727 , 8.918224610396585); //Makes a latlng
      map.panTo(latLng); //Make map global
  }



    function xx3() {




    $.getJSON("/vaij.php?la=45.59426285330727&lg=8.918224610396585", function(json1) {
        var markers = [];
          $.each(json1, function(key, data) {
            var latLng = new google.maps.LatLng(data.la, data.lg); 
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: latLng,
                title: data.namesp
            });
            marker.setMap(map);
          });
        });

}

function xx4() {
    map.clearOverlays();


var markersArray = [];

function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}
}

    </script>

So... what exactly is it you're asking? Have you tried to write a function that tries to delete the markers? If so, could you please post it and explain what's working and what isn't? If not, why haven't you tried it yourself yet? — Max Leske, Jan 18 '14 at 17:54
It sounds like you need to keep a global array of the markers as you add them so you can clear them later. See this [SO question](http://stackoverflow.com/questions/1544739/google-maps-api-v3-how-to-remove-all-markers). — John S, Jan 18 '14 at 17:58

score 2 · Accepted Answer · answered Jan 19 '14 at 17:17

Using the code that you posted as an answer and as stated in one of the comments: create a global array of markers. Add each marker to the array in the inix function. Loop through the markers array in the deleteMarkers function and for each marker, use setMap(null) to remove it.

So, outside of your functions:

var markers = [];

In the inix function (after you created your marker):

markers.push(marker);

In the deleteMarkers function:

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

    markers[i].setMap(null);
}

score 0 · Answer 2 · answered Jan 19 '14 at 02:19

yes! i had think about initialize()! but i don't want use another map. i have think something like this:

 <script type="text/javascript">

 var map;
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(40.76455136505513, -73.98056030273438),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
    inix(); 
  }

    var testing ;


    function inix() {

       $.getJSON("/vaij.php?la=40.76455136505513&lg=-73.98056030273438", function(json1) {
          $.each(json1, function(key, data) {
            var latLng = new google.maps.LatLng(data.la, data.lg); 
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: latLng,
                title: data.namesp
            });
            marker.setMap(map);
            testing=marker;
            console.log(testing[0]);
          });
        });
  }
  function deleteMarkers() {


    for (var b=0; b<=10; b++)
   {
   testing.setMap(null);
   }
   }

  </script>

the problem is that deleteMarkers function remove only one marker

score 0 · Answer 3 · answered Mar 14 '14 at 21:54

0

Have you given something like this the old college try?

function clearMarkers() {
  setAllMap(null);
}

As recommended here

answered Mar 14 '14 at 21:54

Mr. Concolato

2,224
5
24
44

How remove marker googlemap $.getjson

3 Answers3