Is there a way to display a Google Map marker after a certain amount of time without needing to refresh the

Question

Is there a way to display a Google Map marker after a certain amount of time without needing to refresh the

Is it possible to update Google Map markers without refreshing the map itself every 30 seconds?

The markers' latitudes and longitudes are retrieved from a database.

Once obtained, these markers are then allocated onto the Google Map.

However, the issue arises when the markers' positions change after 30 seconds as the entire map is refreshed. The goal is to have the Google Map display the updated marker positions without refreshing the whole map.

Below is the provided code snippet:

<script>

    function initMap() {
        var infowindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: {lat: 19.9518684, lng: 73.7354084}
        });

        var image = '<?php echo $getImagePath; ?>'
        for (var o in markers) {

            lat = markers[ o ].lat;
            lng = markers[ o ].lng;
            address = markers[ o ].address;

            var my = new google.maps.LatLng(lat, lng);
            //console.log(my);
            var marker = new google.maps.Marker({
                position: my,
                map: map,
                icon: image,

            });
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent("'" + address + "'");
                infowindow.open(map, marker);
            });

        }

    }

</script>

Attempts using

google.maps.event.addDomListener(window, "load", initMap);

and window.onload = initMap; haven't been successful. Any assistance would be greatly appreciated!

javascript php google-maps-api-3

Answer 1

Answer №1

Hopefully this slight modification to your code will steer you in the right direction. Without all the necessary details provided in the question, I can only make educated guesses

// These variables are global as they are set in initMap and utilized outside of it
var image = '<?php echo $getImagePath; ?>';
var map;
var infowindow;
var markers = [/* some initial markers loaded almost magically */];

function initMap() {
    infowindow = new google.maps.InfoWindow();
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: {lat: 19.9518684, lng: 73.7354084}
    });
    updateMarkers(true);
}

function updateMarkers(firstLoad) {
     markers.forEach(marker => {
         var lat = marker.lat;
         var lng = marker.lng;

         marker.my = new google.maps.LatLng(lat, lng);

         if (firstLoad) {
             marker.marker = new google.maps.Marker({
                position: marker.my,
                map: map,
                icon: image,

            });

            google.maps.event.addListener(marker.marker, 'click', function () {
                 infowindow.setContent("'" + marker.address + "'");
                 infowindow.open(map, marker.marker);
            });
        } else {
            marker.marker.setPosition(marker.my);
        }
     });
}

function locateAndModifyMarkerDataWithMagic(marker) {
    // Find corresponding marker in markers array
    // Update lat, lng, and address
}

function retrieveNewMarkerPositionsViaAjaxAndInvokeCallback(cb) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'someURI');
    xhr.onload = function() {
        var data = JSON.parse(xhr.responseText);
        data.forEach(function(marker) {
            locateAndModifyMarkerDataWithMagic(marker); 
        });
       cb()
    };
    xhr.send();
}

setInterval(function () {
    retrieveNewMarkerPositionsViaAjaxAndInvokeCallback(function() {
        updateMarkers(false);
    });
}, 30000);

Without insight into how markers are initially loaded into markers, or what is expected from

retrieveNewMarkerPositionsViaAjaxAndInvokeCallback

and

locateAndModifyMarkerDataWithMagic

, it's challenging to offer precise guidance without further context on marker handling within your codebase

Answer 2

Hopefully this slight modification to your code will steer you in the right direction. Without all the necessary details provided in the question, I can only make educated guesses

// These variables are global as they are set in initMap and utilized outside of it
var image = '<?php echo $getImagePath; ?>';
var map;
var infowindow;
var markers = [/* some initial markers loaded almost magically */];

function initMap() {
    infowindow = new google.maps.InfoWindow();
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: {lat: 19.9518684, lng: 73.7354084}
    });
    updateMarkers(true);
}

function updateMarkers(firstLoad) {
     markers.forEach(marker => {
         var lat = marker.lat;
         var lng = marker.lng;

         marker.my = new google.maps.LatLng(lat, lng);

         if (firstLoad) {
             marker.marker = new google.maps.Marker({
                position: marker.my,
                map: map,
                icon: image,

            });

            google.maps.event.addListener(marker.marker, 'click', function () {
                 infowindow.setContent("'" + marker.address + "'");
                 infowindow.open(map, marker.marker);
            });
        } else {
            marker.marker.setPosition(marker.my);
        }
     });
}

function locateAndModifyMarkerDataWithMagic(marker) {
    // Find corresponding marker in markers array
    // Update lat, lng, and address
}

function retrieveNewMarkerPositionsViaAjaxAndInvokeCallback(cb) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'someURI');
    xhr.onload = function() {
        var data = JSON.parse(xhr.responseText);
        data.forEach(function(marker) {
            locateAndModifyMarkerDataWithMagic(marker); 
        });
       cb()
    };
    xhr.send();
}

setInterval(function () {
    retrieveNewMarkerPositionsViaAjaxAndInvokeCallback(function() {
        updateMarkers(false);
    });
}, 30000);

Without insight into how markers are initially loaded into markers, or what is expected from

retrieveNewMarkerPositionsViaAjaxAndInvokeCallback

and

locateAndModifyMarkerDataWithMagic

, it's challenging to offer precise guidance without further context on marker handling within your codebase

Is there a way to display a Google Map marker after a certain amount of time without needing to refresh the

Answer №1

Similar questions

Ways to verify if a variable holds a JSON object or a string

Tips for sending web form data straight to Google Sheets without the need for an authentication page

The HTML checkbox remains unchanged even after the form is submitted

Guide for displaying SQL data in an HTML table

I am interested in scraping a webpage, how should I go about it?

Exploring the Prototype-based programming concept in JavaScript

Issues encountered with jQuery Form Plugin failing to pass a string value to PHP

Angular 7 error: No provider found for PagerService causing NullInjectorError

Should pages be indexed to index.php or should the top and bottom parts of the page be created and included in all content pages?

Guide on displaying the name attribute of a button along with its price in a separate div when clicked

selecting options from a drop-down menu within a table's row

removing the mapStateToProps function will result in an undefined value

The parsing of source maps fails due to issues with the .htaccess file

Error: Collection2 validation did not pass: The field 'name' must be filled in, the field 'email' cannot be empty, and the field 'message' is mandatory

Automatically numbering table columns with custom language localization in JavaScript using Jquery

Issue encountered while transferring data from view to controller via ajax

Refreshing GIF images in React using forceReload

Iterating over the IDs of div elements using jQuery loop

What could be causing the jQuery news ticker to malfunction on my site?

Mastering regular expressions in TypeScript