Click here to Skip to main content
15,907,906 members
Please Sign up or sign in to vote.
2.67/5 (3 votes)
See more:
Hi I am trying to make a google map with markers with places from a database. When you do a 'maouseover' opens an info window. Everything works fine except tha i have a side bar with a list of divs of the places which i display on the map, and i want when click each of the links to open the InfoWindow of that place...but the showInfo function doesn't fire up!!!

The complete code of the page is below Help Please!

C#
entityPoints = objSytem.GetEntityPoints();
String markerPoints = "";
String infoWindowContent = "";
int i = 0;
int k;
if (entityPoints.Rows.Count > 0)
{
    markerPoints += Environment.NewLine + " markersDescription=new Array();";
    foreach (DataRow r in entityPoints.Rows)
    {
        i++;
        latitude = r["latitude"].ToString().Replace(",", ".");
        longtitude = r["longtitude"].ToString().Replace(",", ".");
        description = r["description"].ToString();
        markerPoints += Environment.NewLine + "   markersDescription[" + i +"] = '" + description + "';";
        infoWindowContent = "<div><img src=/Graphics/Buttons/a" + i + ".gif /></div>";
        //infoWindowContent += "<div style=" + "margin-top:10px;" + ">" + description + "</div>";
        infoWindowContent += "<div style=" + "margin-top:10px;" + "><a href=" + "/en/Destinations/Destination.aspx?destinationID=" + i + ">" + description + "</div>";
        // create a line of JavaScript for marker on map for this record
        markerPoints += Environment.NewLine + "var position_" + i + " = new google.maps.LatLng(" + latitude + "," + longtitude + "); ";
        markerPoints += Environment.NewLine + "var marker_" + i + " = new google.maps.Marker({position : position_" + i + ", title : '" + description + "', icon :'http://visit/Graphics/GoogleMarkers/blue.png'}); marker_" + i + ".setMap(map); ";
        markerPoints += Environment.NewLine + "var infoWindow_" + i + " = new google.maps.InfoWindow({ content: '" + infoWindowContent + "', size: new google.maps.Size(50,50)}); ";
        markerPoints += Environment.NewLine + " google.maps.event.addListener(marker_" + i + ", 'mouseover', function() {infoWindow_" + i + ".open(map, marker_" + i + "); marker_" + i + ".setIcon('http://visit/Graphics/GoogleMarkers/yellow.png');  if (previousInfoWindow!=infoWindow_" + i + "){ previousInfoWindow.close();} });";
        markerPoints += Environment.NewLine + " google.maps.event.addListener(marker_" + i + ", 'mouseout', function() {marker_" + i + ".setIcon('http://visit/Graphics/GoogleMarkers/blue.png');  previousInfoWindow = infoWindow_" + i + "; });";
    }
    markerPoints += Environment.NewLine + " var markerCounter=" + i + ";";
    markerPoints += Environment.NewLine + " var j;";
    markerPoints += Environment.NewLine + " function showInfo()";
    markerPoints += Environment.NewLine + " {";
    markerPoints += Environment.NewLine + "  var k=showInfo.arguments[0];";
    markerPoints += Environment.NewLine + "  var k=showInfo.arguments[0];";
    markerPoints += Environment.NewLine + "infoWindow_" + i + ".open(map, marker_" + i + ");
    //markerPoints += Environment.NewLine + "  google.maps.event.trigger(k, 'click');";
    markerPoints += Environment.NewLine + "  alert(k);";
    markerPoints += Environment.NewLine + " }";
    markerPoints += Environment.NewLine + " for (j=1; j<=markerCounter; j++)";
    markerPoints += Environment.NewLine + " {";
    markerPoints += Environment.NewLine + "   html_side_bar += '<div id=div_' + j + '><a href=javascript:showInfo('+j+')>' + markersDescription[j] + '</a></div>';";
    markerPoints += Environment.NewLine + " }";
    markerPoints += Environment.NewLine + " var objDiv = document.getElementById('side_bar')";
    markerPoints += Environment.NewLine + " objDiv.innerHTML = html_side_bar;";
    markerPoints += Environment.NewLine + " alert(objDiv.innerHTML);";
    markerPoints += Environment.NewLine + " showInfo('value='+3);";
}
string myScript = @"<script type='text/javascript'>
       function initialize()
                           {
                            var i;
                            var html_side_bar='';
                            var previousInfoWindow = new google.maps.InfoWindow();
                            var latLngRhodesCenter = new google.maps.LatLng(36.44835, 28.22375);
                            var myOptions = {zoom: 12, center: latLngRhodesCenter, mapTypeId: google.maps.MapTypeId.ROADMAP};
                            var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
                            " + markerPoints + @"
                            map.setUIToDefault();
                           }
                </script>";
Posted

1 solution

Try this

markerPoints += Environment.NewLine + "   html_side_bar += '<div id=div_' + j + '><a href=\'javascript:showInfo('+j+')\'>' + markersDescription[j] + '</a></div>';";


Simply enclose the href's value in quotes.

Take care of escaping the quotes as well.


HTH
Rajeev



Please vote and mark the answer as accepted if this helps
 
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