To remove previous markers before adding new Markers

Question

I am trying to develop Location based web application .I am facing problem to remove previous markers before adding new markers into the google maps. the map uses click event to add marker whenever user click on button.I want to remove previous marker and add new markers whenever click event is occured . to achieve this task I also have created one fuction but I am unable to find out where I should call this fuction. And in this code I am using mouseover event for displaying infowindow which are associated from markers . I am facing problem to disappear last infowindow when user move out of pointer onto last marker the marker. can anyone help me out from this problem. this is my code...

<script src="https://maps.googleapis.com/maps/api/js?key=v3"></script>
<script>
            var find1;
            var find2;
            var a, b, c, d;
            var map;
            var arr = [];
            var marker;
            var rstnearbybikaji = [
                [ 28.568884, 77.1868144, 'Aangan, Hyatt Regency Ring Road, Bhikaji Cama Place, R.K. Puram New Delhi, Delhi 110066', 4],
                [ 28.5677822, 77.1883104, 'South Indian Food Ansal Chamber-II 6, UG-9, Bhikaji Cama Place, R.K. Puram New Delhi, Delhi 110066', 5],
                [ 28.5677822, 77.1872972, 'Snack Bar , Ug 65 & 66, Somdutt Chamber II, 9 Bhikaji Cama Place New Delhi, Delhi 110066', 3],
                [ 28.568653, 77.1890415, 'Dominos ,Shop No. 30, 31 & 32, Ansal Chambers 1, Upper Ground Floor, Bhikaji Cama Place,R.K. PuramNew Delhi, Delhi 110066', 2],
                [ 28.5686276, 77.1855986, 'La Piazza ,Hyatt Regency Ring Road, Bhikaji Cama Place New Delhi, Delhi 110066', 1]
            ];
            var rstnearbynp =[ 
                [ 28.5481617 , 77.2518832 , ' The First Floor Restaurant and Bar ,104/58 ,Sahyog Nehru Place , New Delhi ,Delhi 110119' ,1],
                [ 28.5472051 , 77.2509509 , ' Dominos Pizza , Shop No. 2,3,4,5,6 and Rear Hall Spot No- G-34AB , Kalkaji New Delhi 110119' , 2],
                [ 28.5482088 , 77.2513012 , 'Sona Sweets & Udipi Restaurant , Shop No G-1 ,Sawaraswati Tower,27 , Nehru Place  New Delhi,Delhi 110048' ,3],
                [ 28.54802657 , 77.2515506 ,'How Abt Chicken Today , Building No 25 , Ground Floor Nahru Palce New Delhi , Delhi ,110019 ' ,4],
                [ 28.550442 , 77.25055 , 'Oh Calcutta  , Lala Lajpat Rai Road  Nahru Place New Delhi , Delhi 110019', 5] ,
                [ 28.549123 , 77.2514391 , 'Cafe Coffee Day,  Nehru Place Metro Station Nehru Place Metro Station, Nehru Place New Delhi, Delhi 110019 ' ,6 ],
                [ 28.550442 , 77.25055 ,'The Chatter House  ,F-15, S-2-3, Lower Ground Floor, Epicuria Mall Nehru Place New Delhi, Delhi 110019']
            ];

            var rstnearbycp = [ 
                [ 28.634072,77.218780 , 'Zen Restaurants  B-25, Connaught Place, Near Rajiv Chowk Metro Station Exit-2 Block B, Connaught Place New Delhi, Delhi 110001 ' , 1 ],
                [ 28.632716 ,77.221474, ' United Coffee House ,E15, Inner Circle, Near Adidas Showroom Block E, Connaught Place New Delhi, Delhi 110001 ',2] ,
                [ 28.631651 , 77.219899 ,'The Host, F- 8 Inner Circle Rajeev Chowk, Connaught Place New Delhi, Delhi 110001' , 3 ],
                [ 28.6315985 ,77.2186665 ,' Taste Of China ,N-18, Outer Circle, Opposite Kasturba Gandhi marg, Connaught Place Block N, Connaught Place New Delhi, Delhi 110001' ,4],
                [ 28.6289146 , 77.2152869 ,'Bhowani Junction , 37, Shaheed Bhagat Singh Marg, Connaught Place, Near Shivaji Stadium, Connaught Place Shivaji Stadium, Connaught Place New Delhi, Delhi 110001', 5]
            ];

            var wrnearbybikaji = [
                [ 28.566903,77.1880163 , ' Wash Room , Ground Floor ,Somdutt Chamber II,  Bhikaji Cama Place New Delhi, Delhi 110066' ,1  ],
                [ 28.569521,77.190682 , ' Shulabh Complex , Block F , Nauroji Nagar , R.K. Puram New Delhi, Delhi 110066' , 2],
                [ 28.567032,77.189558 ,' Shulabh Complex , A2/11 ,Africa Ave Block A2 , Safdarjung Enclave New Delhi , Delhi 110029' ,3 ]
            ];  
             var wrnearbynp = [
                [ 28.548298 , 77.249330 , 'Shulabh Complex , 707 Lala Lajpat Rai Road Nahru Place , New Delhi, Delhi ,110019 ' , 1 ],
                [ 28.5506388 , 77.2513826 , ' Shulabh Complex , Nehru Palce New Delhi , Delhi 110048' , 2 ]
                ];
            var wrnearbycp = [
                [28.631283,77.218708 ,'Shulabh Complex ,Connaught Circus , Connaught Place New Delhi, Delhi 110001' , 1],
                [28.632022,77.222667 ,'Shulabh Complex , Block M, Connaught Place New Delhi, Delhi 110001 ' , 2]
                ];



            function initialize() {
                var mapOptions = {
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP ,
                    center: new google.maps.LatLng(28.567924, 77.188079)
                }
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            }



            function getlocation() {
                find1 = document.getElementById('place');
                find2 = document.getElementById('location');
                //a = find1.options[find1.selectedIndex].value;
                //b = find1.options[find1.selectedIndex].text;
                //c = find2.options[find2.selectedIndex].value;
                //d = find2.options[find2.selectedIndex].text;
                // if (a == "Restaurants" && c == "Bikaji") 
                {
                if ( find1.value == "Restaurants" && find2.value == "Bikaji" ) 
                {
                    setMarkers(map, rstnearbybikaji);
                } 
                else if  ( find1.value == "Restaurants" && find2.value == "Nehru Place" )
                {
                    setMarkers(map , rstnearbynp);
                }
                else if ( find1.value == "Restaurants" && find2.value == "Cannought Place" )
                {
                    setMarkers(map , rstnearbycp );
                }
                else if ( find1.value =="Wash Room"  && find2.value == "Bikaji" )
                {
                    setMarkers(map , wrnearbybikaji );
                }
                else if ( find1.value =="Wash Room"  && find2.value == "Nehru Place")
                {
                    setMarkers(map , wrnearbynp );
                }
                else if ( find1.value =="Wash Room"  && find2.value == "Cannought Place")
                {
                    setMarkers(map , wrnearbycp );  
                }
                else 
                {
                    alert("Please Select Elements from list box ");
                }

            }
            }

            function setMarkers(map, locations) 
            {

                for (var i = 0; i < locations.length; i++) {
                    var rst =  locations[i]
                    var infowindow = new google.maps.InfoWindow();
                    var myLatLng = new google.maps.LatLng(rst[0], rst[1]);
                    map.setCenter(myLatLng);
                    marker = new google.maps.Marker({
                        position: myLatLng,
                        map: map,
                        });


                    //var content = " Address :" + rst[2];
                    google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
                        return function () {
                            infowindow.setContent(  locations[i][2])
                            infowindow.open(map, this)
                        }
                    })(this, i))
                    }
                    arr.push(marker);
            }
                function clearMarker()
                    {
                     for( var i=0; i < arr.length;i++)
                        {
                         arr[i].setMap(null);
                        }
                    }




            google.maps.event.addDomListener(window, 'load', initialize);

</script>
<body>          
            <div class="abc">
    <form>
        <table id="table1">
            <tr>
                <td>Find:</td>
                <td>
                    <select id="place">
                        <option value="Restaurants">Restaurants</option>
                        <option value="Wash Room">Wash Room</option>
                        <option value="Hotels">Hotels</option>
                    </select>
                </td>
                <td id="id1">NearBy:</td>
                <td>
                    <select id="location">
                        <option value="Nehru Place">Nehru Place</option>
                        <option value="Bikaji">Bikaji</option>
                        <option value="Cannought Place">Cannought Place</option>
                    </select>
                </td>
                <td id="find">
                    <input type="button" value="Find" name="search" onclick="getlocation()" style="width:80px " />
                </td>
            </tr>   
        </table>
    </form>
</div>
<div id="map-canvas"></div>
</body>
</html>

Check http://stackoverflow.com/questions/1544739/google-maps-api-v3-how-to-remove-all-markers . Call your clear function inside button 'click' event. — alpakyol, Feb 13 '15 at 08:27

score 0 · Accepted Answer · answered Feb 13 '15 at 06:13

0

I did the same thing in one of my projects. Works smoothly!

 var gmarkers = []; //declared globally

 function removeMarkers() {
   for (i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setMap(null);
   }
 }

While inserting the markers, I used to insert the marker in array

gmarkers.push(marker);

call removeMarkers() based on your requirements.

answered Feb 13 '15 at 06:13

Danyal Sandeelo

12,196
10
47
78

when you are rendering the new markers, just call it before them,,, – Danyal Sandeelo Feb 13 '15 at 06:27
I try it but it didn't work.I am getting confused because of I am new for google maps api programming . Can you give quick glance of code over my code regarding of my problem. – Mayank Soni Feb 13 '15 at 07:47
function setMarkers(map, locations) {removeMarkers – Danyal Sandeelo Feb 13 '15 at 09:26
cal it before loop @MayankSoni – Danyal Sandeelo Feb 13 '15 at 09:27

score 0 · Answer 2 · answered May 04 '17 at 19:07

I did this but in Angular version works :)

http://plnkr.co/edit/caW6vr?p=preview

angular.module('nowCtrls', []).controller('NowCtrl', function() {
  var nc = this;
  nc.positions = [];

  nc.placeMarker = function(event) {
    nc.positions = [];

    var loc = event.latLng;
    nc.positions.push({
      pos: [loc.lat(), loc.lng()]
    });


  };






}).controller('BuyCtrl', function() {

});

To remove previous markers before adding new Markers

2 Answers2

Linked