CODEWITHSUNDEEP
javascriptjqueryjsongoogle-mapsgoogle-maps-api-3
user3210366
user3210366

Reputation: 59

How remove marker googlemap $.getjson

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>

Upvotes: 0

Views: 476

Answers (3)

Mr. Concolato
Mr. Concolato

Reputation: 2230

Have you given something like this the old college try?

function clearMarkers() {
  setAllMap(null);
}

As recommended here

Upvotes: 0

MrUpsidown
MrUpsidown

Reputation: 22496

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);
}

Upvotes: 2

user3210366
user3210366

Reputation: 59

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

Upvotes: 0

Related Questions