Google Maps API v3: remove marker

Question

0.00/5 (No votes)

See more:

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 14-Jan-15 9:21am

Samira Radwan

Updated 18-Jul-17 3:28am

Add a Solution

3 solutions

Solution 3

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

}

Posted 18-Jul-17 3:28am

Member 13315698

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Peter Leow · Accepted Answer · 2015-01-14T21:22:00

Solution 1

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[^]

Posted 14-Jan-15 21:22pm

Peter Leow

Samira Radwan · Accepted Answer · 2015-01-15T05:01:00

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

Google Maps API v3: remove marker

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us