Location Marker Issue using Google Maps API

Question

I am using Google Maps API to show the location markers on .Net platform. I have stored the Latitude, Longitude ,City and State information in database, and am facing a problem with the Map and Marker not showing up if I add the 7th database entry for Latitude and Longitude.

Below is the code for .aspx and code behind

.aspx:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
     <title>
         Google Map Locations
     </title>

     <script type="text/javascript"
     src="https://maps.googleapis.com/maps/api/js?key=My_Key&sensor=false">
     </script>
</head>

<body onload="initialize()">
     <form id="form1" runat="server">
          <div id="mapArea" style="width: 700px; height: 700px;">
          </div>

           <asp:Label ID="Label11" runat="server"></asp:Label>
     </form>
</body>
</html>

Code Behind:

namespace GoogleMaps
{
    public partial class GoogleMaps : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string markers = GetLocationMarkers();
            Label1.Text = @"
              <script type='text/javascript'>
                 function initialize() {

                 var mapOptions = {
                     center: new google.maps.LatLng(39.948427, -101.836428),
                     zoom: 2,
                     mapTypeId: google.maps.MapTypeId.ROADMAP
                 };

                 var myMap = new google.maps.Map(document.getElementById('mapArea'),
                             mapOptions);"
                  + markers +
                @"}
             </script>";
        }

        protected string GetLocationMarkers()
        {
            string markers = "";
            using (SqlConnection con = new
            SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConString"].ConnectionString))
            {
                SqlCommand cmd = new SqlCommand(
                                 "SELECT Latitude, Longitude, City FROM Map", con);
                con.Open();
                SqlDataReader reader = cmd.ExecuteReader();
                int i = 0;

                while (reader.Read())
                {
                    i++;
                    markers += @"var marker"+i.ToString()+ @" = 
                               new google.maps.Marker({                                                                                                            
                    position:google.maps.LatLng("+reader["Latitude"].ToString() +"
                    , "+
                    reader["Longitude"].ToString() +")," + 
                    @"map: myMap,title:'"+reader["City"].ToString()+
                   "'});";
                }
            }
            return markers;
        }
    }
}

While debugging, I am finding, On Marker 7, I see \r\n after city name, In below debug output, Example: After Pipestone

markers "var marker1 = new google.maps.Marker({
      position: new google.maps.LatLng(32.692383, -114.626648),
      map: myMap, title:'Yuma'});
var marker2 = new google.maps.Marker({
      position: new google.maps.LatLng(38.250095, -122.040001),
      map: myMap, title:'Fairfield'});
var marker3 = new google.maps.Marker({
      position: new google.maps.LatLng(26.56225, -81.948121),
      map: myMap, title:'Cape Coral'});
var marker4 = new google.maps.Marker({
      position: new google.maps.LatLng(45.52263, -122.681208),
      map: myMap, title:'Portland'});
var marker5 = new google.maps.Marker({
      position: new google.maps.LatLng(37.810308, -85.981012),
      map: myMap, title:'Vine Grove'});
var marker6 = new google.maps.Marker({
      position: new google.maps.LatLng(28.540228, -81.385238),
      map: myMap, title:'Orlando'});
var marker7 = new google.maps.Marker({
      position: new google.maps.LatLng(43.99878, -96.313606),
      map: myMap, title:'Pipestone\r\n'});" string

But when just 6 entries in database I don't see \r\n after city Name, Example: In below debug output: After Orlando

markers "var marker1 = new google.maps.Marker({
      position: new google.maps.LatLng(32.692383, -114.626648),
      map: myMap, title:'Yuma'});
var marker2 = new google.maps.Marker({
      position: new google.maps.LatLng(38.250095, -122.040001),
      map: myMap, title:'Fairfield'});
var marker3 = new google.maps.Marker({
      position: new google.maps.LatLng(26.56225, -81.948121),
      map: myMap, title:'Cape Coral'});
var marker4 = new google.maps.Marker({
      position: new google.maps.LatLng(45.52263, -122.681208),
      map: myMap, title:'Portland'});
var marker5 = new google.maps.Marker({
      position: new google.maps.LatLng(37.810308, -85.981012),
      map: myMap, title:'Vine Grove'});
var marker6 = new google.maps.Marker({
      position: new google.maps.LatLng(28.540228, -81.385238),
      map: myMap, title:'Orlando'});

What could be causing Google Map to not show up? With just 6 entries in database there is no issue with the Map showing up with Markers. Any answer would be greatly appreciated.

Don't use a label to get a script onto your page! Just put the script on the page markup (.aspx). If you need to pass data from server side into the script, you can inject it in via hidden fields or embedding it into a variable in the script on the markup page. — mason

ScaisEdge ScaisEdge · Accepted Answer · 2015-10-30T20:08:22

Could be an escape sequence problem Try selecting only the 7th city Piperstone for check if the problem is related to string content. In this marker si not show try updating this entry deleting the '\r\n' char

Location Marker Issue using Google Maps API

1 Answers