Click here to Skip to main content
15,918,193 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi Experts,
i have a Google store locator. everything seem to work except when i try new search it doesn't clear previous markers.
here is my javascript code:
JavaScript
<script lang="javascript" type="text/javascript">
        var map;
        var mapOptions;
        var geocoder;
        var info_Window;
        

        var http_request = false;
        var lat = 0;
        var lng = 0;

        var startingLat = 58.859223547066584; 
        var startingLng = -99.84375;
        var startingZoom = 3;

        function mapLoad() { 
            geocoder = new google.maps.Geocoder();
            mapOptions = {
                center: new google.maps.LatLng(startingLat, startingLng),
                zoom: startingZoom,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map'), mapOptions);
        }
        
        function searchLocations() {
            
            var address = document.getElementById('postalCode').value;
            var searchString = address;

            geocoder.geocode({ address: searchString }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    searchLocationsNear(results[0].geometry.location);
                }
                else
                    map = new google.maps.Map(document.getElementById('map'), mapOptions); var sbar = document.getElementById('sidebar');
                    sbar.innerHTML = 'address ( ' + searchString + ' ) not found on Google!';
            });

        }

        function searchLocationsNear(center) {
            var radius = document.getElementById('ddlRadius').value;
            var searchUrl = 'Results.aspx?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;


            downloadUrl(searchUrl, function (data) {


                //clear side bar entries
                var sbar = document.getElementById('sidebar');
                sbar.innerHTML = '';
               
                if (data.documentElement == null) {
                    sbar.innerHTML = 'No results found.  Please try widening your search area.';
                    map = new google.maps.Map(document.getElementById('map'), mapOptions);
                    return;
                }

                var locations = data.documentElement.getElementsByTagName('marker');

                if (locations.length == 0) {
                    sbar.innerHTML = 'No results found.  Please try widening your search area.';
                    map = new google.maps.Map(document.getElementById('map'), mapOptions);
                    return;
                }

                var bounds = new google.maps.LatLngBounds();
                var mapmarker;
                for (var i = 0; i < locations.length; i++) {
                    var addName = locations[i].getAttribute('LocationDescription');
                    var address1 = locations[i].getAttribute('Address1');
                    var Phone = locations[i].getAttribute('Phone');
                    var town = locations[i].getAttribute('Town');
                    var postcode = locations[i].getAttribute('Postcode');
                    var distance = parseFloat(locations[i].getAttribute('distance'));
                    var direction = "hello";
                    var add = "type your address";
                    var Customeraddress = document.getElementById('postalCode').value;
                    direction = "<a href='http://maps.google.com/maps?saddr=" + Customeraddress + "&daddr=" + address1 + "&hl=en' style='text-decoration: none;color:rgb(40,149,221);font-weight:bold;font-size:14px;' target='_blank'>get directions</a>";
                   
                    var point = new google.maps.LatLng(parseFloat(locations[i].getAttribute('Latitude')), parseFloat(locations[i].getAttribute('Longitude')));
                    bounds.extend(point);

                    //to make name bold.
                    addName='' + addName+''
                    var mapmarker = createMarker(point, addName, address1, town, postcode, Phone, direction);
                    var sidebarEntry = createSidebarEntry(mapmarker, addName, address1, town, Phone, distance);
                    sbar.appendChild(sidebarEntry);
                }

                var pointCenter = bounds.getCenter();
                var iZoomLevel = map.fitBounds(bounds);
                map.setCenter(pointCenter, iZoomLevel);
            });
        }        

        // Create the marker with address info.
        function createMarker(point, addName, address1, Phone, town, postcode, direction) {
            var image = 'img/letter_A1.png';
            
            var marker = new google.maps.Marker({
                map: map,
                icon: image,
                position: point,
                title: address1,
                animation: google.maps.Animation.DROP

            });

            var html;
            if (Phone == null) {
                html = '<div class="test">' + addName + '<br/>' + address1 + '<br/>' + town + '<br/>' + postcode + '<br/>' + direction + addName + '</div>';
            }
            else {
                html = '<div class="test">' + addName + '<br/>' + address1 + ', ' + town + '<br/>' + postcode + '<br/>' + Phone + '<br/>' + direction + '</div>';
            }
            info_Window = new google.maps.InfoWindow();
            google.maps.event.addListener(marker, "click", function () {                
                info_Window.setContent(html);
                info_Window.open(map, marker);              
            });

            return marker; 
        }
        // Create the side bar entry as a menu item
        function createSidebarEntry(marker, addName, address1, Phone, town, distance) {
            var div = document.createElement('div');
            var address;
            if (Phone == '' || Phone == null) {
                address =addName +'</br>' + address1 + '</br>' + town;
            }
            else {
                address = addName + '</br>' + address1 + '</br>' + Phone + '</br>' + town;
            }
            var html = '<div class="title">' + distance.toFixed(2) + ' miles: <br/></div>' + address;
            div.innerHTML = html;
            div.style.cursor = 'pointer';
            div.style.marginBottom = '10px';
            //div.style.cssFloat = 'left';
            div.className = 'span3';
            google.maps.event.addDomListener(div, "click", function () {
                google.maps.event.trigger(marker, "click");
            });
            google.maps.event.addDomListener(div, "mouseover", function () {
                div.style.backgroundColor = '#eee';
            });
            google.maps.event.addDomListener(div, "mouseout", function () {
                div.style.backgroundColor = '#fff';
            });
            return div;
        }
    </script>


what am i doing wrong, please advise.

thanks in advance
Posted
Updated 18-Jul-17 3:28am

Place all markers into an array, so that you can refer to them in order to clear them.
Check this out: Google Maps V3 - Remove all Markers[^]
 
Share this answer
 
thank You @Peter Leow for your help.
the post was helpful. here's what i have done:
1- added an array of markers:
JavaScript
var markers = [];

2- fill it in my function to create markers:
JavaScript
// Create the marker with address info.
        function createMarker(point, addName, address1, Phone, town, postcode, direction) {
            var image = 'img/letter_A1.png';
            var marker;
            marker = 0;
            marker = new google.maps.Marker({
                map: map,
                icon: image,
                position: point,
                title: address1,
                animation: google.maps.Animation.DROP

            });
            
            var html;
            if (Phone == null) {
                html = '<div class="test">' + addName + '<br />' + address1 + '<br />' + town + '<br />' + postcode + '<br />' + direction + addName + '</div>';
            }
            else {
                html = '<div class="test">' + addName + '<br />' + address1 + ', ' + town + '<br />' + postcode + '<br />' + Phone + '<br />' + direction + '</div>';
            }
            info_Window = new google.maps.InfoWindow();
            google.maps.event.addListener(marker, "click", function () {
                info_Window.setContent(html);
                info_Window.open(map, marker);
            });

            markers.push(marker); 
            return marker; //here i return only marker for the side bar.
        }


3- then create a function to clear the array of markers:
JavaScript
//clear markers before starting new search 
        function clearLocations() {
            info_Window = new google.maps.InfoWindow();
            info_Window.close();
            for (var i = 0; i < markers.length; i++) {
                markers[i].setMap(null);
            }
            markers.length = 0;
        }

        function searchLocationsNear(center) {
            //call clrear markers
            clearLocations();
            //search ;


it works for me. in case it will help in the future.

thanks,
Samira
 
Share this answer
 
v2
If you array is over 1000 markers it would be faster to just clear the whole map of markers and events, especially click event on each marker, due to memmory size

JavaScript
   map.clear();
// if you have extra events on the map make a new function to call after clear();
function getMapEvents(){

   map.addListener('zoom_changed',function(){});

}
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900