Click here to Skip to main content
15,905,508 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
hii..
i have following code for multiple marker on map..
it display all marker after 5 seconds..but i want show them one by one..
my idea is to set a marker and use setTimeout to wait 5 seconds and then set the next marker.

However, it doesn't work. it show all the markers at the same time.

How can i achieve my goal? Thanks for your help!!!!!!!!!!!!!!!

Here is my code:

 var locations = [
  ['loan 1', 17.22, 78.28, 'address 1'],
  ['loan 2', 13.5, 79.2, 'address 2'],
  ['loan 3', 15.24, 77.16, 'address 3']
  ];

  function initialize() 
  {
      var myOptions = {
      center: new google.maps.LatLng(21.16536,72.79387),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    
    setTimeout(function() {setMarkers(map,locations);},5000);

  }

  function setMarkers(map,locations)
  {
      var marker, i

      for (i = 0; i < locations.length; i++)
      {  
         var loan = locations[i][0]
         var lat = locations[i][1]
         var long = locations[i][2]
         var add =  locations[i][3]

        latlngset = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({  
        map: map, title: loan , position: latlngset 
         
        });
        map.setCenter(marker.getPosition())
       
        var content = "Loan Number: " + loan +  '</h3>' + "Address: " + add     

        var infowindow = new google.maps.InfoWindow()

        google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
        return function() {
        infowindow.setContent(content);
        infowindow.open(map,marker);
        };
        })(marker,content,infowindow)); 

     }
  }
window.onload=initialize;
Posted

Try this..

XML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var locations = [
  ['loan 1', 17.22, 78.28, 'address 1'],
  ['loan 2', 13.5, 79.2, 'address 2'],
  ['loan 3', 15.24, 77.16, 'address 3']
  ];

  function initialize()
  {
      var myOptions = {
      center: new google.maps.LatLng(21.16536,72.79387),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
 $.each(locations, function (i, item) {
var loc = new google.maps.LatLng(parseFloat(item[1]), parseFloat(item[2]));
      setTimeout(function() {

           var marker = new google.maps.Marker({
                position: loc,
                title: item[0],
                map: map,
                animation: google.maps.Animation.DROP,


            });
            var infowindow = new google.maps.InfoWindow({
                content: "Loan Number: " + item[0] + '</h3>' + "Address: " + item[3]
            });

            // Open the infowindow on marker click
            google.maps.event.addListener(marker, "click", function () {
                infowindow.open(map, marker);
            });
            //markers.push(marker);
        }, i * 600);
});
}
</script>

window.onload=initialize;
 
Share this answer
 
try this in cs page it's work
C#
webResponseObject = (HttpWebResponse)webRequestObject.GetResponse();
          sr = new StreamReader(webResponseObject.GetResponseStream());

          String Results = sr.ReadToEnd();
          using (XmlReader reader = XmlReader.Create(new StringReader(Results)))
          {
              // Parse the file and display each of the nodes.
              while (reader.Read())
              {
                  if (reader.Name == "businessName" && reader.NodeType == XmlNodeType.Element)
                  {
                      dt1.Rows.Add();
                      dt1.Rows[a]["businessName"] = reader.ReadInnerXml();
                  }
                

                 
                  if (reader.Name == "latitude" && reader.NodeType == XmlNodeType.Element)
                  {
                      dt1.Rows[a]["latitude"] = reader.ReadInnerXml();
                  }
                  if (reader.Name == "longitude" && reader.NodeType == XmlNodeType.Element)
                  {
                      dt1.Rows[a]["longitude"] = reader.ReadInnerXml();
                  }
                
                 

                 
              }
          }
          if (dt1 != null)
          {
              dlsearch.DataSource = dt1;
              dlsearch.DataBind();
              Binddataset(dt1);
          } 

C#
private void Binddataset(DataTable tb1)
    {
        String Latitude = "";
        string Longitude = "";
        String Locations = "";
        foreach (DataRow r in tb1.Rows)
        {
            // bypass empty rows
            if (r["Latitude"].ToString().Trim().Length == 0)
                continue;

            Latitude = r["Latitude"].ToString();
             Longitude = r["Longitude"].ToString();

            // create a line of JavaScript for marker on map for this record
            Locations += Environment.NewLine + " map.addOverlay(new GMarker(new GLatLng(" + Latitude + "," + Longitude + ")));";
        }

        // construct the final script
        js.Text = @"<script type='text/javascript'>
                            function initialize() {
                              if (GBrowserIsCompatible()) {
                                        var map = new GMap2(document.getElementById('map_canvas'));
                                        zoom: 2;
                                         map.setCenter(new GLatLng( " + Latitude + @",  " + Longitude + @"), 6);
                                        " + Locations + @"
                                        map.setUIToDefault();
                                        });

                                }

                }
            </script> ";

}
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900