CODEWITHSUNDEEP
google-maps-api-3
a-b-r-o-w-n
a-b-r-o-w-n

Reputation: 515

How to dynamically add data to google maps API?

I have got a map that I want to have a feed of lat/long data getting pushed to the map data array. I have the function to get the data, but am having trouble getting that to be usable in the map data array.

The idea is to have a new marker drop in when a new coordinate is added to the array. Any ideas? Thanks in advance!

   var ID='0';
        var DATA=[];
        function getData(){
            var url = 'http://us7.fieldagent.net/api/newResponses/';
            //url = 'http://us7.fieldagent.net/api/newResponses/;
            $.post(url,{'id':ID},function(data){
                if(data.status_id == 0){
                    ID = data.id;
                    console.log('Last Id: '+data.id);
                    var new_data = data.responses;

                    var count = 0
                    $.each(new_data,function(i,v){
                        count += 1;
                        var coord = 'new google.maps.LatLng('+v.lat+','+v.lon+'),';
                        DATA.push(coord);
                    })
                    console.log('Added '+count+' responses..')
                }
            });
        }
    $(document).ready(function(){
                getData();
                setInterval(getData,20*1000);
            });

        function drop() {
                for (var i = 0; i < DATA.length; i++) { 
                        setTimeout(function() {
                            addMarker();
                        }, i * 500);
                    }
                } 

        function addMarker(){
            markers.push(new google.maps.Marker({
                position: DATA[iterator],
                map: map,
                draggable: false,
                icon: 'fatie.svg',
                animation: google.maps.Animation.DROP
            }));
            iterator++;
        }

Upvotes: 0

Views: 1704

Answers (2)

Jeff-Meadows
Jeff-Meadows

Reputation: 2184

You need to actually add the item to the map. Right now, you're only adding an item to your DATA array. You need to call addMarker with the new data as well.

You seem to want to add these markers to the map at an interval so they drop onto the map over time, while also being able to query for new markers from your server.

Try code like this:

var ID='0';
var DATA=[];
function getData(){
    var url = 'http://us7.fieldagent.net/api/newResponses/';
    $.post(url,{'id':ID},function(data){
        if(data.status_id == 0){
            ID = data.id;
            console.log('Last Id: '+data.id);
            var new_data = data.responses;

            var count = 0
            $.each(new_data,function(i,v){
                count += 1;
                var coord = 'new google.maps.LatLng('+v.lat+','+v.lon+'),';
                DATA.push(coord);
            });
            console.log('Added '+count+' responses..');
            if (count > 0) addMarker(); //call addMarker if there are new markers
        }
    });
}
$(document).ready(function(){
    getData();
    setInterval(getData,20*1000);
});

function addMarker(){
    if (DATA.length == 0) return; //exit if DATA is empty
    markers.push(new google.maps.Marker({
        position: DATA.shift(), //take the first item in DATA
        map: map,
        draggable: false,
        icon: 'fatie.svg',
        animation: google.maps.Animation.DROP
    }));
    if (DATA.length > 0) setTimeout(addMarker, 500); //call again if needed
}

Upvotes: 1

Th 00 m&#196; s
Th 00 m&#196; s

Reputation: 3826

Create a Method which does two things.

  1. Add to the Array
  2. Add the Item to the map

Upvotes: 0

Related Questions