CODEWITHSUNDEEP
google-maps-api-3
user1251986
user1251986

Reputation: 11

update markers without reloading the web page google maps v3

First of all I apologize for my poor English but I can not find the answer to my question on all French forums.

I am developing an application that is to make real-time tracking of a fleet of vehicles.

I'm at the end of this application but I have a problem. I can not update my markers without reloading my web page.

I tried with settimeout() but it still charging my map

here is my code thank you for your help.

ps: when completed this application will be available in open source

    <html lang="fr">
    <head>
    <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="theme.css"/>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta charset="UTF-8" />
        <title>Geonano V1</title>
        <style type="text/css">
            html{height: 100%}
            body{height: 100%; margin: 0px; padding: 0px}
            #EmplacementDeMaCarte{height: 100%}
        </style>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            function initialisation() {
                var tableauLieux = [ 
//here I have a loop in php to get my markers in my database

["Paris",     48.86110, 2.34459],
["Versailles",     48.78199, 2.11045]


                ];
                var optionsCarte = {
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
                var bounds = new google.maps.LatLngBounds();
                for (var i = 0; i < tableauLieux.length; i++) {
                    var Lieu = tableauLieux[i];
                    var pointLieu = new google.maps.LatLng(Lieu[1], Lieu[2]);
                    bounds.extend(pointLieu);
                    var marqueurLieu = new google.maps.Marker({
                        position: pointLieu,
                        map: maCarte,
                        title: Lieu[0],
                        icon : Lieu[3],
                        clickable: true

                    });
                    //création de l'info-bulle
                    var infoBulle = new google.maps.InfoWindow({
                    content: Lieu[0]//ici on peut mettre des balises HTML
                    });
                google.maps.event.addListener(marqueurLieu, 'click', function() {
            infowindow.setContent(Lieu[i][0]);
            infoBulle .open(maCarte,marqueurLieu);
            }); 
                }

                maCarte.fitBounds(bounds);
            }

            google.maps.event.addDomListener(window, 'load', initialisation);
            setInterval("initialisation()", 5000); 
        </script>
    </head>

    <body>
        <div id="EmplacementDeMaCarte"></div>



    </body>
    <META HTTP-EQUIV="Refresh" CONTENT="120; URL=http://localhost/geonano.php">
</html>

Upvotes: 1

Views: 5366

Answers (3)

Carlos
Carlos

Reputation: 4637

a good way to do that is using something like 

refreshIntervalId = setInterval("requestPoints()", 4000);

function requestPoints() {
    $.ajax({
        url:'{% url 'gpstracking.ajax.request_tracks' %}',
        type: 'get',
        dataType: 'json',
        data: {
            vehicles: vehicles
        },
        success: function (positions) {
            updatePoints (positions);
        }
    });
}

function updatePoints (positions) {
    console.debug('updating markers');
    var lttd;
    var lgtd;
    for (var i=0; i < positions.length; i++) {
        lttd = positions[i].latitude;
        lgtd = positions[i].longitude;
        position = map.createPosition({
            lat: lttd,
            lng: lgtd,
        });
        markers[positions[i].registration].setPosition(position);
    };
    if (positions.length > 1) {
        //map.fitZoom();
    } else {
        map.setCenter (lttd, lgtd);
    }
}

Upvotes: 0

auo
auo

Reputation: 572

If I understand it correctly, you're redrawing the map each 5 second with all the markers.

Bascily what you want to do is store your marker in an array that you can loop through at a later time to change their lat and lng. Clear them from the map, change the information and then put them back on the map. Changing the information is going to need some ajax.

marker.setMap(null);

Upvotes: 0

Dr.Molle
Dr.Molle

Reputation: 117354

You'll have to request a ressource(may be a PHP-script) which returns the data for the markers(tableauLieux) using AJAX.

Once you got the response, remove the current markers and create the new markers.

Upvotes: 1

Related Questions