Jake Marmak Jake Marmak - 1 year ago 97
Javascript Question

How to pass data from Code Behind to JavaScript?

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.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);
var bounds = new google.maps.LatLngBounds();

<div id="dvMap" style="width: 500px; height: 500px">
<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" />

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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download