Hi guys,

need to add google maps auto complete locations to my existing map.

my code on codepen: http://codepen.io/anon/pen/LRqZjE

I tried adding this to my code but unfortunately it did not work, the autocomplete function must work with the prayer times when a location has been selected.

my code:

Code:
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="main.css">


	<script type="text/javaScript" src="http://praytimes.org/code/v2/js/PrayTimes.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script type="text/javascript">
		var geocoder;
		var map;
		var $lon;
		var $lat;
		var geocoder;
		var mapOptions;
		var markers = [];

		function initialize() {
			var berlin = new google.maps.LatLng(52.5200, 13.4050);
			
			mapOptions = {
				center: berlin,
				zoom: 7
			}
			map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
			geocoder = new google.maps.Geocoder();
		 
			addMarker(berlin);
			calculateDay(13.4050, 52.5200);
			
			google.maps.event.addListener(map, 'click', function(event) {
				addMarker(event.latLng);
				calculateDay(event.latLng.lng(), event.latLng.lat());
			});	
		}
		function addMarker(location) {
			for (var i = 0; i < markers.length; i++) {
				markers[i].setMap(null);
			}
			markers = [];
			var marker = new google.maps.Marker({
				position: location,
				map: map,
				draggable:true
			});
		  markers.push(marker);
			google.maps.event.addListener(marker,'drag',function(event) {
				calculateDay(event.latLng.lng(), event.latLng.lat());
			});

			google.maps.event.addListener(marker,'dragend',function(event) {
				calculateDay(event.latLng.lng(), event.latLng.lat());
			});
			
		}
		function codeAddress() {
		  var address = document.getElementById('address').value;
		  geocoder.geocode( { 'address': address}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
			  map.setCenter(results[0].geometry.location);
				addMarker(results[0].geometry.location);
				calculateDay(results[0].geometry.location.lng(), results[0].geometry.location.lat());
			} else {
			  alert('Geocode was not successful for the following reason: ' + status);
			}
		  });
		}
		function calculateDay(lon, lat) {
					$lon = lon;
					$lat =  lat;
					prayTimes.setMethod('MWL'); 
					prayTimes.adjust( {asr: 'Standard', isha: '90 min'} );
					prayTimes.tune( {fajr: -90, shoroeq: 0, dhuhr: 0, asr: 0, maghrib: 0, isha: 0} );
					var date = new Date(); // today
					var times = prayTimes.getTimes(date, [lat, lon], +1);
					var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
					var list2 = ['الفجر<br />Fajr', 'الشروق<br />Shuruq', 'الظهر<br />Dhuhr', 'العصر<br />Asr', 'المغرب<br />Maghrib', 'العشاء<br />Isha'];

					var html = '<table id="timetable">';
					for(var i in list)	{
						html += '<tr><td>'+ list2[i]+ '</td>';
						html += '<td>'+ times[list[i].toLowerCase()]+ '</td></tr>';
					}
					html += '</table>';
					document.getElementById('day').innerHTML = html;
		}
		function generateCalendar(){

					prayTimes.setMethod('MWL');
					prayTimes.adjust( {asr: 'Standard', isha: '90 min'} );
					prayTimes.tune( {fajr: -90, shoroeq: 0, dhuhr: 0, asr: 0, maghrib: 0, isha: 0} );
					var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
					var monthNames = [ "Januari", "Februari", "Maart", "April", "Mei", "Juni","Juli", "Augustus", "September", "Oktober", "November", "December" ];
					var weekdayNames = [ "Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"];
					
					var html ='';
					
					var y = document.getElementById("SelectYear");
					var date = new Date(y.options[y.selectedIndex].text, 0, 1);
					for(var j = 0; j<12; j++){//month is zero based
					
						html += '<br><br><table id="timetable" ';
						if(j<11){
							html += 'class="break">';
						}else{
							html += '>';
						}
						date.setMonth(j);
						html += '<tr><td id="month">'+ monthNames[date.getMonth()] + ' '+y.options[y.selectedIndex].text.substr(2,2) + '</td> <th>الفجر<br />Fajr</th>  <th>الشروق<br />Shuruq</th>  <th>الظهر<br />Dohr</th>  <th>العصر<br />Asr</th>  <th>المغرب<br />Maghrib</th>  <th>العشاء<br />Isha</th> </tr>';

						while (date.getMonth() === j) {
							var times = prayTimes.getTimes(new Date(date), [$lat, $lon], +1);//Menen
							
							if(date.getDay() == 5){
								html += '<tr id="vrijdag">';
							}else{
								html += '<tr>';
							}
							
							
							html += '<th id="label">' + date.getDate() + ' ' + weekdayNames[date.getDay()] + '</th>';
							for(var i in list)	{
								//html += '<td>'+ list[i]+ '</td><tr>';
								html += '<td>'+ times[list[i].toLowerCase()]+ '</td>';
							}
							html += '</tr>';
							date.setDate(date.getDate() + 1);
						 }
						html += '</tr></table></br>';
					}


				
				
			var myWindow=window.open('test.html','test','scrollbars=1, width=900,height=600');
			myWindow.document.write('<html>	<head><link rel="stylesheet" type="text/css" href="jaar_kalender.css"></head><body onload="window.print()">');
			myWindow.document.write(html);
			myWindow.document.write('</body></html>');
			myWindow.document.close();
			myWindow.focus();
		}
		google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>

	<div id="wrapper">
		<div id="left">
			<form onsubmit="return false">
				<input id="address" type="textbox" value="Berlin" style="width: 300px;">
				<input id="submit" type="submit" value="Zoek Adres" onclick="codeAddress()">
			</form>
			<div id="map-canvas"></div>	
		</div>
		<div id="right">
			<br>
		
			<br><br>
	
			<h1 id="times-today"><script type="text/javascript">
			var title = 'Gebedstijdeuun ';
			var d =  new Date();

			document.getElementById('times-today').innerHTML= "Prayertimes " + d.getDate() + '/' + (d.getMonth()+1)+'/' + d.getFullYear().toString().substr(2,2);
			</script></h1>
			
			<div id="day"></div>
			<br><br>
	

			<div id="calendar-controls">
				Year: <select id="SelectYear" name="SelectYear" size="1">
				<script type="text/javascript">
				var startyear = new Date().getFullYear();
				var endyear   = new Date().getFullYear()+5;
				for(var k=startyear; k<=endyear; k++ ) 
				{
				  var selected = (k==(startyear+0)) ? 'selected' : '';
				  document.write("<option value='"+k+"'"+selected+">"+k+"</option>");
				}
				</script>
				</select>
				<input id="submit2" type="submit" value="Print " onclick="generateCalendar()">
				
			</div>
			<br><br>
	
		
		</div>

	</div>
	
  </body>
</html>

Hope someone can get me in the right direction.

Thanks in advance