Jake Marmak Jake Marmak - 2 months ago 20
Vb.net Question

Code behind to javascript In Map value

Hi I am having trouble to pass a value from a code behind (onLoad) to javascript.
I am able to get the value for the address of the draggable marker(if INITIAL LAT and LONG value declared statically on javascript). Now I tried to load the value on ON Load value on Code behind using two hidden fields the problem is doesn't show the map and marker. Here's my code

<div class="panel-body">

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyCPzl7Nmzd71jMSTi46X5tGxpLCuo2n1sy"></script>
<script type="text/javascript">


var markers = [

{

"title": 'Target Location',
//"lat": '43.7328831',
//"lng": '-79.6784712',
"lat": document.getElementById<%= HdLat.ClientID%>.value,
"lng": document.getElementById<%= HdLng.ClientID%>.value,
"description": ''
}
];

window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var geocoder = geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (var 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,
map: map,
title: data.title,
draggable: true,
animation: google.maps.Animation.DROP
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
google.maps.event.addListener(marker, "dragend", function (e) {
var lat, lng, address;
geocoder.geocode({ 'latLng': marker.getPosition() }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
lat = marker.getPosition().lat();
lng = marker.getPosition().lng();
address = results[0].formatted_address;
document.getElementById("mytext").value = address;

}
});
});
})(marker, data);
latlngbounds.extend(marker.position);
}
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
//map.fitBounds(latlngbounds);
}


</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
<br />



<div class="form-group"><asp:Label ID="Label1" runat="server"></asp:Label><br />
<input type="text" id="mytext" class="form-control" name="Address"/>

<asp:Button ID="Button1" runat="server" Text="Button" />
<%--<asp:ImageButton ID="ImageButton4" runat="server" class="popovers" AlternateText="Point Location" Height="28px" ImageAlign="AbsMiddle" ImageUrl="~/img/maploc.png" Width="28px" data-original-title="Locate" data-content="Locate by means of map " data-placement="right" data-trigger="hover" />--%>
<asp:HiddenField ID="HdLat" runat="server" />
<asp:HiddenField ID="HdLng" runat="server" />
</div>





Code behind is

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
HdLat.Value = "43.7328831"
HdLng.Value = "-79.6784712"
End Sub


Hoping for your kind Help...

Win Win
Answer

Easiest way is to use Literal server control, and pass the value. It is kind of weird, but it works.

var markers = [{
   ...
   "lat": <asp:Literal runat="server" ID="LatLiteral" />,
   "lng": <asp:Literal runat="server" ID="LngLiteral" />
}];

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
   LatLiteral.Text = "43.7328831"
   LngLiteral.Text = "-79.6784712"
End Sub

Visual Studio

Notice that Visual Studio will complain for syntax error. You can ignore it.

enter image description here

Rendered Code

enter image description here