javascript - Cant display google map and getting error of recursion -

i want draw line between 2 location on google map.

say eg:london canada

i having 2 textbox autocomplete feature select location draw lines.

this code:

<script src="~/jquery.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry,places&language=en-au&signed_in=true&v=3.exp"></script>  <input type="text" class="login" value="" name="source" id="source">  <input type="text" class="login" value="" name="destination" id="destination"> 

my script auto complete using google api:

<script>      var autocomplete = new google.maps.places.autocomplete(jquery_1_1_3("#source")[0], {});          google.maps.event.addlistener(autocomplete, 'place_changed', function () {             var place = autocomplete.getplace();         });          var autocomplete1 = new google.maps.places.autocomplete(jquery_1_1_3("#destination")[0], {});          google.maps.event.addlistener(autocomplete1, 'place_changed', function () {             var place = autocomplete1.getplace();         });     </script> 

google map code dras lined between 2 location:

function initialize() {         //alert(s)              var mapoptions = {                 zoom: 6,                 center: new google.maps.latlng(-25.363882, 131.044922)             };              var map = new google.maps.map(document.getelementbyid('map-canvas'),                 mapoptions);              map.controls[google.maps.controlposition.top_center].push(                 document.getelementbyid('info'));               marker1 = new google.maps.marker({                 map: map,                 draggable: true,                 position: new google.maps.latlng("21.1702401, 72.8310607")             });              marker2 = new google.maps.marker({                 map: map,                 draggable: true,                 position: new google.maps.latlng("20.9467019, 72.9520348")             });              @*marker3 = new google.maps.marker({                 map: map,                 draggable: true,                 position: new google.maps.latlng(@model.routename)             });*@           var bounds = new google.maps.latlngbounds(marker1.getposition(),             marker2.getposition());         map.fitbounds(bounds);          google.maps.event.addlistener(marker1, 'position_changed', update);         google.maps.event.addlistener(marker2, 'position_changed', update);         //google.maps.event.addlistener(marker3, 'position_changed', update);          var polyoptions = {             strokecolor: '#ff0000',             strokeopacity: 1.0,             strokeweight: 3,             map: map,         };         poly = new google.maps.polyline(polyoptions);          var geodesicoptions = {             strokecolor: '#cc0099',             strokeopacity: 1.0,             strokeweight: 3,             geodesic: true,             map: map         };         geodesicpoly = new google.maps.polyline(geodesicoptions);          update();     }      function update() {         var path = [marker1.getposition(), marker2.getposition()];         poly.setpath(path);         geodesicpoly.setpath(path);         var heading = google.maps.geometry.spherical.computeheading(path[0],             path[1]);         document.getelementbyid('heading').value = heading;         document.getelementbyid('origin').value = path[0].tostring();         document.getelementbyid('destination').value = path[1].tostring();     }     google.maps.event.adddomlistener(window, 'load', initialize()); 

now want display google map on click of button:

 function displaygooglemap() {         var source=$("#source").val();         var destination=$("#destination").val(); } 

now displaying google map on page load , getting error:

1. typeerror: document.getelementbyid(...) null
2. too recursion