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]

<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>
<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>
[/CODE]

Hope someone can get me in the right direction.

Thanks in advance

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.