adding google maps auto complete to existing map
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
