title: Add text in Google Map Markers
body: <p>I have managed to get a google map on my site using Javascript api of google maps.. and it works great...</p>
  
  <p>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.</p>
  
  <p>This is what I have done:</p>
  
  <p>My script in the head:</p>
  
  <pre><code>     &lt;script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=false
               &amp;amp;key=AIzaSyCRuaf5l3GKHKII8uG8TDUFW35xr34PgEw" type="text/javascript"&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>My div for the map:</p>
  
  <pre><code>      &lt;asp:Panel ID="Panel1" runat="server"&gt;
              &lt;asp:Literal ID="js" runat="server"&gt;&lt;/asp:Literal&gt;
              &lt;div id="map_canvas" style="width: 400px; height: 400px; margin-bottom: 2px;"&gt;
              &lt;/div&gt;
              &lt;br /&gt;
          &lt;/asp:Panel&gt;
  </code></pre>
  
  <p>And this is showing the map and adding the positions:</p>
  
  <pre><code>            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 = @"&lt;script type='text/javascript'&gt;
                          function initialize() {                                 
                            if (GBrowserIsCompatible()) {
                              var map = new GMap2(document.getElementById('map_canvas'));
                              map.setCenter(new GLatLng(" + custLocationLat + "," + custLocationLong + @"), 8); 
                              " + Locations + @";                                 
                              map.setUIToDefault();
                              }
                          }
                          &lt;/script&gt; "; 
      }
  </code></pre>
  
  <p>I'm very new to javascript and google maps. If anybody can please lead me in the right direction I would really appreciate it!</p>
  
  <hr>
  
  <h2><strong>ANSWER</strong></h2>
  
  <p>This is the solution:</p>
  
  <p>Code Behind:</p>
  
  <pre><code>     public class Marker
  {
      public string title;
      public string lat;
      public string lng;
      public string description;
  }
  
      private void BuildScript(DataTable tbl)
      {
          string custLocationLat, custLocationLong;
  
          List&lt;Marker&gt; valueList = new List&lt;Marker&gt;();                    
  
          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&lt;Marker&gt; marker = new List&lt;Marker&gt;();
  
          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);
      }
  </code></pre>
  
  <p>APS.Net</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;       
  
        var markers = document.getElementById("&lt;%=hdnMarkers.Value%&gt;").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 &lt; 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);
            }
        }   &lt;/script&gt;
  </code></pre>