Event listeners via ClientScriptManager for map server-side scripting

Question

I am having trouble with the markers' event listeners, here I have successfully populated the map using LINQ in server-side

var x = from a in db.project_profiles
        select new
        {
             a.project_gis_latitude,
             a.project_gis_longitude,
             a.project_title
        };

Csm

    string csName = "MapScript";
            Type csType = this.GetType();
            ClientScriptManager csm = Page.ClientScript;
             if (!csm.IsStartupScriptRegistered(csType, csName))
            {
                StringBuilder sb = new StringBuilder();

and this is the entire string for the map

    sb.Append("  <script> ");

                     sb.Append(" var myLatLng = {lat: 8.2784189, lng: 125.5922004}; ");
                     //sb.Append("alert(myLatLng.lat);");
                     sb.Append("    var markers = [];");

                 sb.Append(" function initMap() { ");
                           sb.Append("  var map = new google.maps.Map(document.getElementById('dvMap'), { ");
                           sb.Append("   zoom: 7, ");
                           sb.Append("   center: myLatLng ");
                           sb.Append("   }); ");
                            foreach (var z in x)
                            {
                                    //sb.Append("alert('"+z.project_title+"');");
                                    sb.Append("     var lat_lng = new google.maps.LatLng(" + z.project_gis_latitude + ", "+z.project_gis_longitude+");       ");
                                    sb.Append("     var marker = new google.maps.Marker({     ");
                                    sb.Append("     position: lat_lng,     ");
                                    sb.Append("     map: map,     ");
                                    sb.Append("     title: '"+z.project_title+"',   ");
                                    sb.Append("     label: '" + z.project_title.Substring(0,1) + "'   ");
                                    sb.Append("     });   "); 


                                    sb.Append("     marker.addListener('click', function() {   ");
                                    sb.Append("     map.setZoom(10);   ");
                                    sb.Append("     map.setCenter(marker.getPosition());   ");
                                    sb.Append("    });   ");
                            };
                                    //sb.Append("alert('End');");
                  sb.Append("   } ");

                  sb.Append("initMap();");
              sb.Append("  </script> ");

and this is the end of the script

csm.RegisterStartupScript(csType, csName, sb.ToString());

there was no error when it runs and all the markers appeared but the listener was only responding to the last marker loaded, I want all the markers to have the listener not just one so I can retrieve their titles when clicked.

i tried to move the listener block out of the foreach group but the same thing happened and only the last marker can be clicked.

and this is the html for the map

<div id="dvMap"></div>

Answer 1

It only attaches a click function to the last marker because you loop in code behind to generate markers, not javascript. For every item in the loop you create the same var marker, so from a JavaScript standpoint, there is only one marker present on the map to attach a function to.

You have to make sure every lat_lng and marker have a unique ID.

int counter = 0;
foreach (var z in x)
{
    //sb.Append("alert('"+z.project_title+"');");
    sb.Append("     var lat_lng" + counter + " = new google.maps.LatLng(" + z.project_gis_latitude + ", " + z.project_gis_longitude + ");       ");
    sb.Append("     var marker" + counter + " = new google.maps.Marker({     ");
    sb.Append("     position: lat_lng" + counter + ",     ");
    sb.Append("     map: map,     ");
    sb.Append("     title: '" + z.project_title + "',   ");
    sb.Append("     label: '" + z.project_title.Substring(0, 1) + "'   ");
    sb.Append("     });   ");


    sb.Append("     marker" + counter + ".addListener('click', function() {   ");
    sb.Append("     map.setZoom(10);   ");
    sb.Append("     map.setCenter(marker" + counter + ".getPosition());   ");
    sb.Append("    });   ");

    counter++;
}

Even better would be to create an javascript array of the map coordinates and do the loop client side. Take a look at this SO answer. It has a JavaScript array. You could create that array in code behind as a string and write it to a Literal for example.

UPDATE

Even better is to send a string with just the map coordinates to the page and loop that array of locations client side.

public string javaScriptLocations = string.Empty;

protected void Page_Load(object sender, EventArgs e)
{
    StringBuilder sb = new StringBuilder();
    sb.Append("var locations = [");

    for (int i = 0; i < x.Count; i++)
    {
        sb.Append("['Location " + i + "', " + z.project_gis_latitude + "," + z.project_gis_longitude + ", " + i + "],");
    }

    javaScriptLocations = sb.ToString().TrimEnd(',') + "];";
}

ASPX page

<script type="text/javascript">
    <%= javaScriptLocations %>

    //map stuff
</script>