Remove tab and new line space using RegularExpression in ASP.Net

Kibock
 
on Sep 26, 2017 11:33 PM
3215 Views

Dear All,

I am trying to implement Google Map using Repeater and SQL Database based on the article: https://www.aspsnippets.com/Articles/ASPNet-Google-Maps-V3-with-Multiple-Markers-Database-Example.aspx

The Google Map is not displaying on web, unless I "cut and paste" the Description text directly from SQL database.

Here is the code:

<div id="dvMap" style="border: thin solid #87ceeb; width:100%; height:300px;"></div>

<script type="text/javascript">
    var markers = [
    <asp:Repeater ID="rptMarkers" runat="server">
    <ItemTemplate>
                {
                    "lat": '<%# Eval("PersonBruddLATITUDE") %>',
                    "lng": '<%# Eval("PersonBruddLONGITUDE") %>',
                    "title": '<%# Eval("PersonShipName") %>',
                    "description": '<%# Eval("PersonBruddDescription") %>'
                }
</ItemTemplate>
<SeparatorTemplate>
    ,
</SeparatorTemplate>
</asp:Repeater>
    ];

</script>

<script type="text/javascript">

    window.onload = function () {

        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 10,
            gestureHandling: 'greedy',
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var icon = "http://www.kystregister.no/assets/img/locationSea.png";

        var infoWindow = new google.maps.InfoWindow();

        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

        for (i = 0; i < markers.length; i++) {

            var data = markers[i];

            var myLatlng = new google.maps.LatLng(data.lat, data.lng);

            var marker = new google.maps.Marker({ position: myLatlng, draggable: false, map: map, animation: google.maps.Animation.DROP, icon: new google.maps.MarkerImage(icon) });

            (function (marker, data) {

                google.maps.event.addListener(marker, "click", function () {

                    infoWindow.setContent("<div style = 'color:#12969b; font-weight:bold;'>" + data.title  + "</div>" + "<br>" + "<div style = 'color:#2d2625;'>" + data.description + "</div>" + "<br>");
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        }
    }
</script>

Code behind:

            if (!this.IsPostBack)
            {
                DataTable dt = GetData("select * from brudd_Los where catID ='" + dataID.Text.Trim() + "'");
                rptMarkers.DataSource = dt;
                rptMarkers.DataBind();
            }
<asp:TextBox ID="dataID" runat="server" > </asp:TextBox> 
<asp:Button ID="Ebutton" runat="server" onclick="Button1_Click" />

How to solve this issue?

Many thanks

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 26, 2017 11:35 PM

Hi Kibock,

Please check the browser console window for error details.

If you are getting MissingKeyMapError then refer below link.

ERROR: Google Maps API MissingKeyMapError in ASP.Net

Kibock
 
on Sep 27, 2017 10:39 AM

The error occurs because og the line space of 

txtPersonBruddDescription the in DB column.

Solution was to use in order to remove the line space before adding record to the DB:

string replacement = Regex.Replace(txtPersonBruddDescription.Text.Trim(), @"\t|\n|\r|""");