set marker one by one on map

Question

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 26-Sep-12 19:35pm

Member 9332883

Add a Solution

2 solutions

Solution 1

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> ";

}

Posted 26-Sep-12 20:03pm

Kolli Hari Chowdary

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

venkat pavan · Accepted Answer · 2012-09-26T23:31:00

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;