Question

This map is to track multiple markers in a single view. The markers have to be updated every 5 seconds from the server.
My infowindow disappears after each refresh. There is a json request every 5 seconds. when i click on the marker, the infowindow appears and is cleared as soon as during next json call. Can i devise a method/any solution to make it appear(dynamic) even after refreshing.

var map1;  
function map1_initialize( )  
{    
    setInterval(function() {
        var lat=new Array();var lng=new Array();var latlng = [];
 $.getJSON('web_services/latlong.php?option=4&user_id=<?php echo $user_id;?>', function(json) {
           $.each(json.Result.Data,function(i,gmap){

    lat[i]=gmap.latitude;
    lng[i]= gmap.longitude;
    latlng[i] = new google.maps.LatLng(lat[i], lng[i]);
/*google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(json.Result.Data[i].alias);
                console.log(json.Result.Data[i]);
              infowindow.open(map, marker);
            }
              })(marker, i)); */


    if ( google.maps.BrowserIsCompatible( ) )    
    {      
    map1 = new google.maps.Map2( document.getElementById( 'map' ) );      
    map1.addControl( new google.maps.LargeMapControl3D( ) );      
    map1.addControl( new google.maps.MenuMapTypeControl( ) );      
    map1.setCenter( new google.maps.LatLng( 0, 0 ), 0 );      
        for ( var i = 0; i < latlng.length; i++ )      
        {        
        var marker = new google.maps.Marker( latlng[ i ] ); 

        map1.addOverlay( marker );  

        }      

        var latlngbounds = new google.maps.LatLngBounds( );    

        for ( var i = 0; i < latlng.length; i++ )      
        {        
        latlngbounds.extend( latlng[ i ] );    

        }      
        map1.setCenter( latlngbounds.getCenter( ), map1.getBoundsZoomLevel( latlngbounds ) );

        GEvent.addListener(marker, 'click', function() {
              // When clicked, open an Info Window
            //alert(gmap.alias);
              marker.openInfoWindowHtml(gmap.alias);
            });
//gmap.alias is the alias name for the marker-loading it via json response

     }

    });

}); 


 }, 5000);



}  

Answer 1

With lot of R&D, i found out the answer!!!Hope this might help somebody…

var json=[];
  function initialize() {

// Create the map 
// No need to specify zoom and center as we fit the map further down.
var map = new google.maps.Map(document.getElementById("map_canvas"), {
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  streetViewControl: false
});

/*jQuery.extend({
getValues: function(url) {
    var result = null;
$.getJSON('web_services/latlong.php?option=4&user_id=21', function(json) {
    result = json;
          });
    return result;
}
});*/

    jQuery.extend({
getValues: function(url) {
//setInterval(function() { 
    var result = null;
    $.ajax({
    url: url,
    type: 'get',
    dataType: 'json',
    async: false,
    success: function(data) {
        result = data.Result.Data;
    }
});
return result;
//},5000);
}

});



setInterval(function() {
var markers=$.getValues("web_services/latlong.php?   option=4&user_id=21");console.log(markers);





// Define the list of markers.
// This could be generated server-side with a script creating the array.
/*var markers = [
  { lat: -33.85, lng: 151.05, name: "marker 1" },
  { lat: -33.90, lng: 151.10, name: "marker 2" },
  { lat: -33.95, lng: 151.15, name: "marker 3" },
  { lat: -33.85, lng: 151.15, name: "marker 4" }
];*/

// Create the markers ad infowindows.
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
  // Create the marker
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(data.latitude, data.longitude),
    map: map,
    title: data.alias
  });

  // Create the infowindow with two DIV placeholders
  // One for a text string, the other for the StreetView panorama.
  var content = document.createElement("DIV");
  var title = document.createElement("DIV");
  title.innerHTML = data.alias;
  content.appendChild(title);

  var infowindow = new google.maps.InfoWindow({
    content: content
  });

  // Open the infowindow on marker click
  google.maps.event.addListener(marker, "click", function() {
    infowindow.open(map, marker);
  });

  // Handle the DOM ready event to create the StreetView panorama
  // as it can only be created once the DIV inside the infowindow is loaded in the DOM.
/*  google.maps.event.addListenerOnce(infowindow, "domready", function() {
    var panorama = new google.maps.StreetViewPanorama(streetview, {
        navigationControl: false,
        enableCloseButton: false,
        addressControl: false,
        linksControl: false,
        visible: true,
        position: marker.getPosition()
    });
  });*/
}

// Zoom and center the map to fit the markers
// This logic could be conbined with the marker creation.
// Just keeping it separate for code clarity.

 var bounds = new google.maps.LatLngBounds();
for (index in markers) {
  var data = markers[index];
  bounds.extend(new google.maps.LatLng(data.latitude, data.longitude));
}
map.fitBounds(bounds);
},5000);//call every of 5 secs.
  }