A new marker has been created on the Ajax Google Map, however, the old marker is still displaying as

Question

A new marker has been created on the Ajax Google Map, however, the old marker is still displaying as

Hey, I'm currently working on retrieving marker latitudes and longitudes using Ajax. I am receiving Ajax data every second and successfully creating markers within a specific radius. However, I'm running into an issue with updating marker positions where new markers are created while the old ones still remain visible. Can someone please assist me in updating the markers fetched from Ajax and removing any extras?


var map = null;
var geocoder = null;
var markers = {};
var infoWindow = null;
var minZoomLevel = 16;

jQuery('#search').click(function() {
    var address = jQuery('#address').val() || 'India';
    if (map === null)
        initializeMap();
    searchAddress(address);
});

// Initialize the Map
function initializeMap() {
    // Map Options
    var mapOptions = {
        zoom: minZoomLevel,
        draggable: true,
        disableDefaultUI: true,
        scrollwheel: true,
        disableDoubleClickZoom: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
    // Create a new Google Map
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);     
  
    // Check for Geolocation Support
    if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(function (position) {
             initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
             map.setCenter(initialLocation);
            
            // Limit the zoom level
            google.maps.event.addListener(map, 'zoom_changed', function () {
                if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
            });
         });
     }
     
    google.maps.event.addListener(map, "idle", function(event) {
        searchStoresBounds();
    });
    
    geocoder = new google.maps.Geocoder();
    infoWindow = new google.maps.InfoWindow();
}

// Search Address Function
function searchAddress(address) {
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            var latlng = results[0].geometry.location;
            map.setCenter(latlng);
            
            // Limit the zoom level
            google.maps.event.addListener(map, 'zoom_changed', function () {
                if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
            });
            
            searchStoresBounds();

        } else {
            alert('Geocode was failed: ' + status);
        }
    });
}

// Perform a Store Search within Bounds at regular intervals
setInterval(function searchStoresBounds() {
    var bounds = map.getCenter().toUrlValue();
    var url = './store.php';
    var parameter = { bounds: bounds };
    
    // Fetch Data using Ajax
    jQuery.ajax({
        url: url,
        data: parameter,
        dataType: 'json',
        success: showStores
    });
}, 1000);

// Display Stores on the Map
function showStores(data, status, xhr) {
    if (data['status'] != 'OK')
        return;
        
    var id;

    // Add Markers for New Stores
    for (id in data['data']) {
        if (markers[id] === undefined)
           createMarker(id, data['data'][id]);
    }

    var b = map.getBounds();
    
    // Remove Markers outside the bounds
    for (id in markers) {
        if (! b.contains(markers[id].getPosition())) {
            markers[id].setMap(null);
            delete markers[id];
        } else {
            createMarker(id, data['data'][id]);
        }
    }
}

// Create New Marker
function createMarker(id, store) {
    var latlng = new google.maps.LatLng(
                parseFloat(store['lat']),
                parseFloat(store['lng'])
            );
    
    var html = "<b>" + store['address'] + "</b>";
   
   // Additional Marker Configuration
   
       var marker = new google.maps.Marker({
            map: map,
            position: latlng,
            icon: icon,

        });
    google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
        });
    markers[id] = marker;
}

javascript ajax google-maps google-maps-api-3

Answer 1

Answer №1

The issue you are experiencing is related to this specific section of code:

var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        icon: icon,

    });

Each time data is retrieved from ajax, a new marker is created.

To resolve this, include the following declaration at the beginning of your js file:

var marker;

Update the marker creation like this:

if(marker)
{
   marker.setMap(null);
}
marker = new google.maps.Marker({
        map: map,
        position: latlng,
        icon: icon,
   });

This modification ensures that before a new marker is added, the previous one is removed from the map. The condition `if(marker)` is essential to avoid errors when attempting to remove a non-existent marker on the first execution.

Additional Note :

If you have multiple markers, it's crucial to maintain an array of markers and clear them before adding new ones to the map.

In your code, declare a marker array at the top of the page like this:

var markerArray = new Array();

Prior to adding new markers, clear the existing markers using:

for(var i = 0; i<markerArray.length; i++)
{
   markerArray[i].setMap(null);
}
markerArray = new Array()

After this process, continue with your current code for creating markers:

var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        icon: icon,
   });

markerArray.push(marker);

Ensure to add each marker to the markerArray for proper maintenance in subsequent executions of your code.

Answer 2

The issue you are experiencing is related to this specific section of code:

var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        icon: icon,

    });

Each time data is retrieved from ajax, a new marker is created.

To resolve this, include the following declaration at the beginning of your js file:

var marker;

Update the marker creation like this:

if(marker)
{
   marker.setMap(null);
}
marker = new google.maps.Marker({
        map: map,
        position: latlng,
        icon: icon,
   });

This modification ensures that before a new marker is added, the previous one is removed from the map. The condition `if(marker)` is essential to avoid errors when attempting to remove a non-existent marker on the first execution.

Additional Note :

If you have multiple markers, it's crucial to maintain an array of markers and clear them before adding new ones to the map.

In your code, declare a marker array at the top of the page like this:

var markerArray = new Array();

Prior to adding new markers, clear the existing markers using:

for(var i = 0; i<markerArray.length; i++)
{
   markerArray[i].setMap(null);
}
markerArray = new Array()

After this process, continue with your current code for creating markers:

var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        icon: icon,
   });

markerArray.push(marker);

Ensure to add each marker to the markerArray for proper maintenance in subsequent executions of your code.

A new marker has been created on the Ajax Google Map, however, the old marker is still displaying as

Answer №1

Similar questions

Building with bricks and mortar does not involve organizing visual content

Implementing Prototype and Ajax for your updates

Creating a feature in Angular JS that allows for each item in a list to be toggled individually

Is there a way for me to extract and showcase the initial 10 items bearing a particular class name from a different html document on my homepage?

The Jquery code encountered an issue where it was unable to access the property 'length' of an undefined

How can I ensure my AngularJS Controller variable is accessible across all page contexts?

using java to invoke a server-side function within a mapReduce operation in mongodb

Using ng-if in AngularJS to compare two objects

What is the method for accessing the req, res objects within the callback functions?

Loading a different webpage seamlessly without having to reload the current one

Implement necessary validation for the country code selection on the dropdown menu using the intl-tel-input jQuery plugin

Setting up NextJS on Vercel for website deployment can encounter a common error known as ENOENT Error, which is caused by the absence of a specific file or

Switch the ng-bind-html option

JavaScript - utilize regular expressions to check if the argument starts with a forward slash

Tips for stopping a Node.js for loop if it runs for more than 20 seconds

When making xmlhttp requests, IE9 will prioritize loading from the cache rather than from the server when the data is available

existing event handler in JavaScript has already been registered on a particular plugin

Troubleshooting Issue with Eloquent Laravel 8 Ajax Request with Inner Join Query

Exploring the power of PHP through a while loop for AJAX requests

I'm experimenting with crafting a new color scheme using MUI, which will dynamically alter the background color of my card based on the API