Problems displaying google map on page

[lm111]

I am having problems displaying a map. Data in ListView is showing on the page but the map is missing. I would appreciate some help. Here is what I have so far:

The following pieces of code are in MyDirectory.Master page:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  
   function init_map(map_canvas_id, lat, lng, zoomLevel, markers) {
    var myLatLng = new google.maps.LatLng(lat, lng);

    var options = {
        zoom: zoomLevel,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };

    var map_canvas = document.getElementById(map_canvas_id);

    var map = new google.maps.Map(map_canvas, options);

    var bounds = new google.maps.LatLngBounds();      

    // Place markers
    for (var i = 0; i < markers.length; i++) {
        var marker = new google.maps.Marker(markers[i]);
        marker.setMap(map);

        bounds.extend(marker.getPosition());
        }

    // Center/zoom the map based on the bounds
    map.fitBounds(bounds);
    map.setCenter(bounds.getCenter());
}

And this piece is in MyDirectory.aspx page

<div id="my_map" style="width:500px;height:400px">

And this piece of code is in MyDirectory.aspx.cs page

protected void btnSearch_Click(object sender, EventArgs e)
    {
        var lat = 39;
        var lng = -91;
        DataTable dt = new DataTable();
        DataRow dr;
        dt.Columns.Add(new DataColumn("Prefix", typeof(string)));
        dt.Columns.Add(new DataColumn("First_Name", typeof(string)));
        dt.Columns.Add(new DataColumn("Last_Name", typeof(string)));
        dt.Columns.Add(new DataColumn("City", typeof(string)));
        dt.Columns.Add(new DataColumn("State", typeof(string)));
        dt.Columns.Add(new DataColumn("Zip_Code", typeof(string)));

        List<string> markers = new List<string>();
        List<DataDetail> dataStudents = (new BLL.MyDirectory.BLLDirectory()).GetAndBindInfo(txtSearchByLastName.Text);
        foreach (DataDetail item in dataStudents)
        {
                 dr = dt.NewRow();
                 dr["Prefix"] = item.Prefix;
                 dr["First_Name"] = item.First_Name;
                 dr["Last_Name"] = item.Last_Name;
                 dr["City"] = item.City;
                 dr["State"] = item.State;
                 dr["Zip_Code"] = item.Zip_Code;

                 dt.Rows.Add(dr);              

                 markers.Add(" { title : \"" + item.Last_Name + "\", position: new google.maps.LatLng(" + item.Latitude + ", " + item.Longitude + " } ");

        }

        dynamic locations = "[" + string.Join(",", markers.ToArray()) + "]";

        ClientScript.RegisterStartupScript(this.GetType(), "LoadMap", string.Format("init_map('my_map', {0}, {1}, 13, {2});", lat, lng, locations), true);  

        DataTable myDt = new DataTable();
        myDt = dt;
        Session["myDataTable"] = myDt;
        lvSearchResults.DataSource = ((DataTable)Session["myDataTable"]).DefaultView;
        lvSearchResults.DataBind();               
    }

[lm111]

Is there anyone out there that could give me a suggestion? Thanks!

[pritaeas]

Perhaps too obvious, but did you include an API key?

[lm111]

It shows the map without the API key if markers are not passed in to the init_map function, but I need to have the markers passed in.

It works like this:

 function init_map(map_canvas_id, lat, lng, zoomLevel) {
.....

 var markers =
   [
      {
          title: "National Art Museum",
          position: new google.maps.LatLng(19.4351262, -99.1334024)
      },
      {
          title: "Viceroyal Painting Gallery",
          position: new google.maps.LatLng(19.4331008, -99.1492114)
      },
      {
          title: "Carmelitan Museum",
          position: new google.maps.LatLng(19.3028860, -99.2352628)
      },
      {
          title: "San Carlos Museum",
          position: new google.maps.LatLng(19.3201515, -99.2265153)
      }
   ]; 


........
}

And I call the init_map function like this from my .aspx file instead of the code behind file

 <div id="my_map" style="width:500px;height:400px"> 

   <script type="text/javascript">
       init_map('my_map', 39, -91, 14);
   </script>

[lm111]

I figured it out, I am missing the closing bracket here:

markers.Add(" { title : \"" + item.Last_Name + "\", position: new google.maps.LatLng(" + item.Latitude + ", " + item.Longitude + " } ");