Access ASP.Net controls when using Master Page in JavaScript

hello

i have this google satellite map its working fine

i just want to modify one thing at last instead of html input i want asp net textbox.

<input name="ctl00$MainContent$TextBox4" type="text" id="MainContent_TextBox4" required  style="width: 100%; max-width: 400px"/>

and this

<input name="ctl00$MainContent$TextBox5"    id="MainContent_TextBox5" required style="width: 100%; max-width: 400px"/>

but i when i add runat=server tag in this the map stop working correctly please advice

<%@  control language="C#" autoeventwireup="true" codebehind="satellitemap.ascx.cs"
    inherits="VirtualEstimatorV1.usercontrol.satellitemap" %>
<!-- Google API services and key -->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=places&amp;key=AIzaSyBpVdzlYqRoPX-aA6eEMQYCP-Ie2sywPFc"></script>
<!-- Ajax -->
<%--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>--%>
<!-- Style options -->
<style type="text/css">
    html, body
    {
        height: 100%;
    }
</style>
<script type="text/javascript">

    var map = null;
    //global marker variable
    var marker = null;

    var infowindow = new google.maps.InfoWindow(
            {
                size: new google.maps.Size(150, 50)
            });

    // A function to create the marker and set up the event window function 
    function createMarker(latlng, name, html) {
        var contentString = html;
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            zIndex: Math.round(latlng.lat() * -100000) << 5
        });

        /*//unused info-window
        google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
        */

        //set variables to get lat/long
        updateOutput(latlng);
        google.maps.event.trigger(marker, 'click');
        return marker;
    }

    // function called 'onload' to set the initial conditions of the map
    function initialize() {
        // set map options
        var myOptions = {
            zoom: 10,
            center: new google.maps.LatLng(-37.82018, 144.9835),
            mapTypeControl: true,
            mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
            navigationControl: true,
            mapTypeId: google.maps.MapTypeId.HYBRID
        }
        // create the map
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        /*//unused info-window
        google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });
        */

        //listener for user click, remove existing marker, place new marker
        google.maps.event.addListener(map, 'click', function (event) {
            //call function to create marker
            if (marker) {
                marker.setMap(null);
                marker = null;
            }
            marker = createMarker(event.latLng, "name", "<b>Location</b><br>" + event.latLng);
        });

        map.setTilt(0);
    }

    //center the map view on a lat/long
    function moveToLocation(lat, lng) {
        var center = new google.maps.LatLng(lat, lng);
        //var map = document.getElementById("map_canvas");
        map.panTo(center);
    }

    //set the variables that hold the output
    function updateOutput(latlng) {
        document.getElementById('MainContent_TextBox5').value = latlng;
        var address = document.getElementById('MainContent_TextBox4');
        var address_string = address.value;
        //URI for example page
        document.getElementById('MainContent_ProcessLink').href = 'http://virtualestimator.bookevening.com/satellitemap.html/?lat=' + latlng.lat() + '&lng=' + latlng.lng() + '&address=' + encodeURI(address_string);
    }
    //]]>
</script>
<script type="text/javascript">
    google.maps.event.addDomListener(window, 'load', function () {
        var places = new google.maps.places.Autocomplete(document.getElementById('MainContent_TextBox4'));
        google.maps.event.addListener(places, 'place_changed', function () {
            if (marker) {
                marker.setMap(null);
                marker = null;
            }
            var geocoder = new google.maps.Geocoder();
            var place = places.getPlace();
            var address = place.formatted_address;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                    var mapOptions = { center: new google.maps.LatLng(latitude, longitude), zoom: 20, mapTypeId: google.maps.MapTypeId.ROADMAP };
                    map;
                    marker = new google.maps.Marker({ position: new google.maps.LatLng(latitude, longitude), map: map });
                    moveToLocation(latitude, longitude);
                    map.setZoom(20);
                    updateOutput(new google.maps.LatLng(latitude, longitude));
                } else {
                    alert("Request failed.")
                }
            });
        });
    });
</script>
<script type="text/javascript">
<!--        window.onload = function () { AddMarkerFromAddress(document.getElementById('MainContent_TextBox4').value); } -- >

function AddMarkerFromAddress(address) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var location = {};
            location.lattitude = results[0].geometry.location.lat();
            location.longitude = results[0].geometry.location.lng();
            var mapOptions = { center: new google.maps.LatLng(location.lattitude, location.longitude), zoom: 20, mapTypeId: google.maps.MapTypeId.ROADMAP };
            //var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            map;
            var myLatLng = new google.maps.LatLng(location.lattitude, location.longitude);
            marker = google.maps.Marker({ position: myLatLng, map: map });
            //unused info-window attached to the marker
            /*google.maps.event.addListener(marker, "click", function (e) {
            var location = e.latLng;
            //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
            infoWindow.setContent("<div style = 'width:200px;min-height:40px'> Latitude:" + location.lat() + "<br/> Longitude:" + location.lng() + "</div>");
            infoWindow.open(map, marker);
            });*/
        }
    });
};
</script>
<script>


    window.onload = initialize;


</script>
<!-- <h1>Virtual Estimator Clickable Google Map</h1> -->
<!--Address autocomplete field-->
Address
<br />
<small>Enter a location or select <a role="button" data-toggle="collapse" href="#collapseExample"
    aria-expanded="false" aria-controls="collapseExample">Map View </a>to place pin
    position</small>
<div>
    <input name="ctl00$MainContent$TextBox4" type="text" id="MainContent_TextBox4" required
        style="width: 100%; max-width: 400px" />
</div>
<div class="collapse map" id="collapseExample">
    <!-- Map -->
    <div id="map_canvas" style="width: 100%; height: 400px">
    </div>
    <!-- latLng output (to be saved with project details to database) -->
    <input name="ctl00$MainContent$TextBox5" id="MainContent_TextBox5" required style="width: 100%;
        max-width: 400px" />
    <!-- Process link -->
</div>
<p>
    <a id='MainContent_ProcessLink' href=""></a>
</p>