Add text in Google Map Markers

Question

I have managed to get a google map on my site using Javascript api of google maps.. and it works great...

Each Location/vehicle has a marker which is great. But the problem is I need to display A name in each marker. I receive my data from sql and loading the latitudes and logitudes works great, I just need to change the marker. From the database I get the Driver name, latitude and logitude. I need to display the Driver name in the marker. These data would depend on a site (which is chosen from a dropdownlist). When a call is logged we need to send the nearest technition out to the client.

This is what I have done:

My script in the head:

     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false
             &amp;key=AIzaSyCRuaf5l3GKHKII8uG8TDUFW35xr34PgEw" type="text/javascript">
</script>

My div for the map:

      <asp:Panel ID="Panel1" runat="server">
            <asp:Literal ID="js" runat="server"></asp:Literal>
            <div id="map_canvas" style="width: 400px; height: 400px; margin-bottom: 2px;">
            </div>
            <br />
        </asp:Panel>

And this is showing the map and adding the positions:

            private void BuildScript(DataTable tbl)
    {
        string custLocationLat, custLocationLong;

        String Locations = "";
        string marker;

        if (lblCustLatitude.Text == "")
            custLocationLat = Convert.ToString(-26.172116);
        else
            custLocationLat = Convert.ToString(lblCustLatitude.Text);

        if (lblCustLongtitude.Text == "")
            custLocationLong = Convert.ToString(28.130557);
        else
            custLocationLong = Convert.ToString(lblCustLongtitude.Text);

        marker = "var = new GMarker(new GPoint(" + custLocationLat + ", " + custLocationLong + "));";

        foreach (DataRow r in tbl.Rows)
        {   
            if (r["Latitude"].ToString().Trim().Length == 0)
                continue;

            string Latitude = r["Latitude"].ToString();
            string Longitude = r["Longitude"].ToString();
            string markerPoints = r["DrivName"].ToString();
            int i= 0;

            Locations += Environment.NewLine + " map.addOverlay(new GMarker(new GLatLng(" + Latitude + "," + Longitude + ")));";
            marker += Environment.NewLine + "var" + i + " = new GMarker(new GPoint(" + Latitude + ", " + Longitude + "));";
            i++;                
        }

        js.Text = @"<script type='text/javascript'>
                        function initialize() {                                 
                          if (GBrowserIsCompatible()) {
                            var map = new GMap2(document.getElementById('map_canvas'));
                            map.setCenter(new GLatLng(" + custLocationLat + "," + custLocationLong + @"), 8); 
                            " + Locations + @";                                 
                            map.setUIToDefault();
                            }
                        }
                        </script> "; 
    }

I'm very new to javascript and google maps. If anybody can please lead me in the right direction I would really appreciate it!

---

ANSWER

This is the solution:

Code Behind:

     public class Marker
{
    public string title;
    public string lat;
    public string lng;
    public string description;
}

    private void BuildScript(DataTable tbl)
    {
        string custLocationLat, custLocationLong;

        List<Marker> valueList = new List<Marker>();                    

        if (lblCustLatitude.Text == "")
            custLocationLat = Convert.ToString(-26.172116);
        else
            custLocationLat = Convert.ToString(lblCustLatitude.Text);

        if (lblCustLongtitude.Text == "")
            custLocationLong = Convert.ToString(28.130557);
        else
            custLocationLong = Convert.ToString(lblCustLongtitude.Text);

        Marker center = new Marker { title = "Smart Office", lat = custLocationLat, lng = custLocationLong, description = "0" };
        List<Marker> marker = new List<Marker>();

        foreach (DataRow r in tbl.Rows)
        {   
            if (r["Latitude"].ToString().Trim().Length == 0)
                continue;

            string Latitude = r["Latitude"].ToString();
            string Longitude = r["Longitude"].ToString();
            string driver = r["DrivName"].ToString();
            string distance = r["Distance"].ToString();

            marker.Add(new Marker { title = driver, lat = Latitude, lng = Longitude, description = distance });          
        }

        JavaScriptSerializer ser = new JavaScriptSerializer();
        hdnMarkers.Value = ser.Serialize(marker);
    }

APS.Net

    <script type="text/javascript">       

      var markers = document.getElementById("<%=hdnMarkers.Value%>").value;

      function initialize()
      {      
          var mapOptions = {     
              center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
              zoom: 8,       
              mapTypeId: google.maps.MapTypeId.ROADMAP         
          };            
          var infoWindow = new google.maps.InfoWindow();       
          var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);  
          var poly = new google.maps.Polyline({ map: map, strokeColor: '#FF8200' });     
          var lat_lng = new Array();      
          for (i = 0; i < markers.length; i++)
          {
              var data = markers[i]
              var myLatlng = new google.maps.LatLng(data.lat, data.lng); lat_lng.push(myLatlng);
              var marker = new StyledMarker({
                  styleIcon: new StyledIcon(StyledIconTypes.BUBBLE, { color: "2590BA", text: data.title }),
                  position: myLatlng, map: map, title: data.title
              });

              (function (marker, data)
              {
                  google.maps.event.addListener(marker, "click", function (e) {
                      infoWindow.setContent(data.description); infoWindow.open(map, marker);
                  });
              })(marker, data);
          }
      }   </script>

Answer 1

Search for infowindows and you will be able to get what you want to do. You can display driver name in infowindow when user click on your map marker. See below links.

https://developers.google.com/maps/documentation/javascript/infowindows

you will find good example here also. Hope this help :)