My current issue involves integrating Google Maps on my website. I have a RadComboBox with locations populated from the database and an ASP panel displaying the Google Map on the right-hand side. I want users to select a location from the RadComboBox, which will then be reflected on the map by obtaining the latitude and longitude.
To achieve this, my plan is to save all locations into an ArrayList, serialize it, save it to a HiddenField, and then use it in JavaScript by deserializing it. However, I am running into issues as nothing seems to be happening as expected.
Below is my VB.NET backend code:
Imports System.Web.Script.Serialization.JavaScriptSerializer
Public Class LocationInfo
Private m_LocationID As Integer = 0
Private m_LocationName As String = Nothing
Private m_LocationLat As String = Nothing
Private m_LocationLng As String = Nothing
#Region "LocationInfo Properties"
Public Property LocationID() As Integer
Get
Return m_LocationID
End Get
Set(ByVal value As Integer)
m_LocationID = value
End Set
End Property
Public Property LocationName() As String
Get
Return m_LocationName
End Get
Set(ByVal value As String)
m_LocationName = value
End Set
End Property
Public Property LocationLat() As String
Get
Return m_LocationLat
End Get
Set(ByVal value As String)
m_LocationLat = value
End Set
End Property
Public Property LocationLng() As String
Get
Return m_LocationLng
End Get
Set(ByVal value As String)
m_LocationLng = value
End Set
End Property
#End Region
End Class
Public Sub GetLocationInfo()
Dim LocationList As New List(Of LocationInfo)
Dim dba As New DBAccess
Dim ds As DataSet = dba.GetUserLocationsByID(m_User.UserID)
Dim dt As DataTable = ds.Tables(0)
For Each dr As DataRow In dt.Rows()
Dim locationInfo As New LocationInfo
locationInfo.LocationName = dr("LocationName")
locationInfo.LocationLat = dr("Lat")
locationInfo.LocationLng = dr("lng")
locationInfo.LocationID = dr("LocationID")
LocationList.Add(locationInfo)
Next
Dim oSerilzer As New System.Web.Script.Serialization.JavaScriptSerializer
Dim sJson As String = oSerilzer.Serialize(LocationList)
hfLocationList.Value = sJson.ToString()
End Sub
*****************************aspx code*****************************
function getValueFromList() {
var jsonString = document.getElementById('hfLocationList').value;
var arr_from_json = JSON.parse(jsonString);
}
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(34.052055, -118.460490)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
<td>Locations:</td>
<td>
<asp:HiddenField runat="server" ID="hfLocationList" Value="0"/>
<telerik:RadComboBox ID="rcbLocations" runat="server">
</telerik:RadComboBox>
<div id="map-canvas">
<asp:Panel ID="Panel1" runat="server" Width="150px" Height="150px">
</asp:Panel>