I am working with Google Maps. Specifically, I am working with http://hpneo.github.io/gmaps for a gps tracker simulation, here I need to update the position on each point. At the gmaps script, markers are stored on an array, and then I was thinking of taking each point and using the setPoint method to update the position, however, the gmaps script doesn't have implemented this method. I was thinking on implement this method, but my question is then: After having an array of markers on the gmaps script, how could I identify each one in order to update position on the correct marker. Or probably I must store it on an external array, an associative array which help me to identifies each marker, but I am thinking that when I update them, the array on the gmap script also will be keeping at the same position without been updated.

I am attaching my code.


/** Positions and map statuses **/
var isLoaded = false;
/** **/
var refreshIntervalId;
var vehicles;
var map;
function setVehicleAsCenter (registration) {
function loadPoints (positions) {
    console.debug('loading markers');
    var lttd;
    var lgtd;
    for (var i=0; i < positions.length; i++) {
        lttd = positions[i].latitude;
        lgtd = positions[i].longitude;
        marker = map.addMarker({
            lat: lttd,
            lng: lgtd,
        markers[positions[i].registration] = marker;
    isLoaded = true
function updatePoints (positions) {
    how could be the alorithm here
    console.debug('updating markers');
function requestPoints() {
        url:'{% url 'gpstracking.ajax.request_tracks' %}',
        type: 'get',
        dataType: 'json',
        data: {
            vehicles: vehicles
        success: function (positions) {
            if (isLoaded == false) {
                loadPoints (positions);
            } else {
                updatePoints (positions);
$(document).ready(function() {
    /** Buttons Click Event Set **/
        vehicles = '';
            vehicles =  vehicles + $.trim(this.text) + "|";
        if (vehicles == '') {
            console.debug('No vehicles to display');
        option = $(this).attr('rel');
        if (option == 'show') {
            console.debug('Ordering to show');
        if (option == 'listen') {
            refreshIntervalId = setInterval("requestPoints()", 10000);
        if (option == 'clear') {
            markers = new Object();
            isLoaded = false;
    /** Map loading **/
    map = new GMaps({
        div: '#map-canvas',
        lat: -16.4237766667,
        lng: -71.54262,

1 Answer 1


GMaps script is ok for simple maps, however on this case, I couldn't use it as I need, one option was refactored the script, but on this case I will use common gmaps loading with markers, and each marker I will set the id with my vehicle plates, in order to each time, when I need to updated the position I look the marker for the id

function initializeMap() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var mapOptions = {
                zoom: 14,
                center: new google.maps.LatLng(-16.4237766667, -71.54262),
                mapTypeId: google.maps.MapTypeId.ROADMAP
        map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
        geocoder = new google.maps.Geocoder();

function loadPoints (positions) {
        var lttd;
        var lgtd;
        var latlng;
        var iconMarker;
        var registration;
        var bounds = new google.maps.LatLngBounds();
        var iw = new google.maps.InfoWindow();
        $('#vehicle-status tbody').html('');
        for (var i=0; i < positions.length; i++) {
            index = positions[i].vehicle;
            lttd = positions[i].latitude;
            lgtd = positions[i].longitude;
            imei = positions[i].imei;
            registration = positions[i].vehicle;
            latlng = new google.maps.LatLng(lttd, lgtd);
            imageIcon = getIconMarker(positions[i].course, positions[i].speed);
            var label = new Label({
                map: map
            label.set('position', latlng);
            label.set('visible', true);
            label.set('text', registration);
            marker = new google.maps.Marker({
                id: registration,
                map: map,
                position: latlng,
                icon: imageIcon,
                optimized: false,
                zIndex: i,
                label: label
            var infowindow = new google.maps.InfoWindow();
            infowindow = new google.maps.InfoWindow();
            google.maps.event.addListener(marker, 'click', function() {
                loadContent(map, this, infowindow);      
            markers[index] = marker;
            if (positions.length > 1) {
            $('#vehicle-status tbody').append(htmlStatusString(positions[i], true))
        if (positions.length == 1) {
            map.panTo(new google.maps.LatLng(lttd, lgtd));
        } else {
        isLoaded = true

Probably a harder way, however I have the whole control of the map, and I could use it as I need

  • Would you please expand upon this answer, with more details of the problem with your model definition, in case future readers face the same issue. Thanks.
    – user3461
    Commented Jun 11, 2013 at 18:09
  • 1
    Sure, I will update also with some code an links were I have found the error, also I have mistake the answer related to other issue found, but I will paste it the right answer, and how I have solved
    – Carlos
    Commented Jun 11, 2013 at 18:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.