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!
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;" + "><a href=" + "/en/Destinations/Destination.aspx?destinationID=" + i + ">" + description + "</div>";
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>";