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