jquery-ui-map load json and update markers

Question

I've searched all over the web and SO, but I couldn't figure this out.

Here's the problem:

I'm using the below demo from jquery-ui-map site to load a JSON file:

http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-json.html

It works fine to load my markers, but I need to refresh its content every 30 seconds and grab new markers.

At first I thought I would just call the function again, but that left the markers there. After some research I found out I needed to clear the markers (not so easy on V3, but I was able to to do) but the issue is that I can't get the markers to show again.

If I use the destroy function, then I'm able to reload new markers and remove the old ones, but that causes the map to blink. When I try to clear markers then no new markers are shown.

Any help is greatly appreciated.

Below is my code:

<script type="text/javascript">
    function mapTest() { 
        $('#map_canvas').gmap('destroy');
        //clearMap();
        demo.add(function() {
            $('#map_canvas').gmap({'disableDefaultUI':true, 'callback': function() {
                var self = this;
                $.getJSON( 'json/demo.json?'+ new Date().getTime(), function(data) { 
                    $.each( data.markers, function(i, marker) {
                        self.addMarker({ 'position': new google.maps.LatLng(marker.latitude, marker.longitude), 'bounds':true } ).click(function() {
                            self.openInfoWindow({ 'content': marker.content }, this);
                        });
                    });
                });
            }}); 
        }).load();
    }

    function clearMap(){
        $('#map_canvas').gmap('clear', 'markers');
    }           

    mapTest();
    setInterval(mapTest, 30000 );
</script>

Cheers.

Not just change location, but you could have different markers. It's dynamic content, like current open restaurants, if one is closed then its marker will be removed from map and if another one opens it will be added. The json is coming from a database. — fdias, Jun 15 '12 at 20:26
I've tried everything, even Bob's code but nothing seems to work. I must be doing something incredibly dumb because I would think this is a pretty straight forward need. If anyone can help I greatly appreciate. I'm starting to think it would be best to use plain Gmaps v3 API... — fdias, Jun 16 '12 at 18:48

Bob · Answer 1 · 2012-06-18T14:02:43.990

0

Your map initialization function is inside the mapTest() function - which you call over an over again every 30 seconds with setInterval.

That is wrong, because you are essentially reloading the map( you destroy it and then recreate it again every 30 seconds ), and that is why it blinks.

Place the map initialization outside the mapTest(), but clear and retrieve new markers from within the mapTest()

Update:

var mapOptions = {
    disableDefaultUI: true
    // add more options if you wish.
};

function mapTest() {

    $('#map_canvas').gmap('clear', 'markers'); // clear old markers
    $.getJSON( 'json/demo.json?'+ new Date().getTime(), function(data) { 
        $.each( data.markers, function(i, marker) {
            var self = this;
            self.addMarker({ 'position': new google.maps.LatLng(marker.latitude, marker.longitude), 'bounds':true } ).click(function() {
                self.openInfoWindow({ 'content': marker.content }, this);
            });
        });
    });
}


$(function(){
    $('#map_canvas').gmap(mapOptions, function(){

        $.getJSON( 'json/demo.json?'+ new Date().getTime(), function(data) { 
            $.each( data.markers, function(i, marker) {
                var self = this;
                self.addMarker({ 'position': new google.maps.LatLng(marker.latitude, marker.longitude), 'bounds':true } ).click(function() {
                    self.openInfoWindow({ 'content': marker.content }, this);
                });
            });
        });
    });

    setInterval(mapTest, 30000 );

});

edited Jun 18 '12 at 14:02

answered Jun 15 '12 at 20:27

Bob

1,355
5
19
38

Thanks for the suggestion Bob, I'll give it a try and report back. – fdias Jun 15 '12 at 20:30
I'm very new to this jquery-ui-map I'm having a hard time separating the map initialization. Could you assist? – fdias Jun 15 '12 at 20:35
@fdias: Try my code from updated post. It might be clumsy, but should do the job. – Bob Jun 15 '12 at 20:43
thanks, unfortunately nothing happens when I run the code. The maps shows Africa (it's default center location and nothing happens after the 30 seconds no marker is ever loaded. – fdias Jun 15 '12 at 20:49
@fdias: Do you get any errors in Web Console( Firefox: Ctrl+Shift+K )? – Bob Jun 15 '12 at 21:35
Yes I got this: [19:30:13.701] self.addMarker is not a function @ http://localhost/maps/demos/jquery-google-maps-json.html:107 -- [19:30:28.695] GET http://localhost/maps/demos/json/demo.json?1339799428693 [HTTP/1.1 200 OK 1ms] – fdias Jun 15 '12 at 22:32
@fdias: Oh. Try my code again. I've changed some things around. – Bob Jun 18 '12 at 14:03
Thanks again Bob for your effort, but unfortunately nothing is happening. I still have the erro [17:32:22.630] self.addMarker is not a function @ http://localhost/maps/demos/jquery-google-maps-json.html:109 – fdias Jun 18 '12 at 20:33
I might be wrong here but couldn't this problem have anything to do with the fact that "this" is not being passed as we are not using an event such as load? – fdias Jun 18 '12 at 20:35

score 0 · Answer 2 · answered Jun 19 '13 at 07:36

I found a Solution to update markers without reloading the map. Try this code...

$(document).ready(function() {
    var $map = $('#map_canvas');
    App.drawMap($map);
    setInterval(function() {

    $('#map_canvas').gmap('clear', 'markers');
       App.drawMap($map);
    },10000);


});



var App = {
    drawMap: function($divMap) {
        Http.doAjaxGetJson('../../js/testjson.json', function(data) {
            for (var k in data.gpsData) {
                $divMap.gmap({ 'center': new google.maps.LatLng(data.gpsData[k].latitude,data.gpsData[k].longitude),'zoom':15, 'callback': function() {}});
                $divMap.gmap('addMarker', {
                    'title':data.obj.name,
                    'position': new google.maps.LatLng(data.gpsData[k].latitude, data.gpsData[k].longitude),
                    'bounds': false,
                }).click(function() {
                     var $_obj = $(this);
                });



        }
    });
}
};

By this code markers will update in every 10 seconds..

jquery-ui-map load json and update markers

2 Answers2