Getting timezones with google maps api
I have a prayer time table which gets its location( location name, longitude and latitude) from the google maps api.
Now the main things work without any hassle but just now i noticed that i'm missing out the timezone for a location that has been searched or displayed.
without the timezone most of the location have wrong prayer times when the timetable is showing.
Is their any possible way i can fetch the timezone with the longitude and latitude for the searched locations.
anyway this could be fixed without any big modifications to the code.
my html code:
Code:
<html>
<head>
<meta name="keywords" http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<link href="https://www.googledrive.com/host/0B6erKxlMnhFDaVNpbllPb2p3NkE?stylo.css" rel="stylesheet" type="text/css" />
<link href="https://www.googledrive.com/host/0B6erKxlMnhFDb2tPSHdrMG9yODQ?search.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDeEE2U3BXTmZkQjA?PrayTimes.js"></script>
</head>
<script type="text/javascript">
/*Daily Prayer Timing Code Starts*/
function getPrayerTimings(latitude, longitude) {
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 todayDate = new Date(); // today
function prayerTimings(offset) {
todayDate.setDate(todayDate.getDate() + offset);
var times = prayTimes.getTimes(todayDate, [latitude, longitude]);
var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
var html = '<table id="dailyTimeTable">';
html += '<tr class="qibla_map_bg_h"><td><span class="fajri"></span><br />الفجر<br />Fajr</td><td><span class="shoroeqi"></span><br />الشروق<br />Shoroeq</td><td><span class="dhuhri"></span><br />الظهر<br />Dhuhr</td><td><span class="asri"></span><br />العصر<br />Asr</td><td><span class="maghribi"></span><br />المغرب<br />Maghrib</td><td><span class="ishai"></span><br />العشاء<br />Isha</td></tr>';
for (var i in list) {
html += '<td class="qibla_map_bg_tr">' + times[list[i].toLowerCase()] + '</td>';
}
html += '</tr></table>';
document.getElementById('dailyTimeTable-Container').innerHTML = html;
function $(id) {
return document.getElementById(id);
}
}
function highlight() {
var date = new Date();
var thisminutes = date.getHours() * 60 + date.getMinutes();
//thisminutes = 1119;
var tbl = document.getElementById("dailyTimeTable")
var cells0 = tbl.rows[0].cells;
var cells1 = tbl.rows[1].cells;
var help = [];
for (var i = 0; i < cells1.length; i++) {
var currenttime = cells1[i].innerHTML.match(/([0-9][0-9]):([0-9][0-9])/);
if (currenttime) currentminutes = parseInt(currenttime[1]) * 60 + parseInt(currenttime[2]);
entry = {
currentminutes: currentminutes,
currentidx: i
};
help.push(entry);
}
help.sort(function (a, b) {
return a.currentminutes - b.currentminutes;
});
var foundnext = foundcurrent = false;
var inext = icurrent = -1;
for (var i = 0; i < help.length; i++) {
currentminutes = help[i].currentminutes;
currentidx = help[i].currentidx;
if (!foundnext && currentminutes > thisminutes) {
foundnext = true;
inext = currentidx;
}
if (currentminutes <= thisminutes) {
foundcurrent = true;
icurrent = currentidx;
}
}
if (!foundnext) inext = help[0].currentidx;
if (!foundcurrent) icurrent = help[help.length - 1].currentidx;
for (var i = 0; i < cells1.length; i++) {
if (i == inext) {
cells0[i].className = "next";
cells1[i].className = "next";
} else if (i == icurrent) {
cells0[i].className = "current";
cells1[i].className = "current";
} else {
cells0[i].className = "";
cells1[i].className = "";
}
}
window.setTimeout(highlight, 0)
}
prayerTimings(0);
highlight();
}
/*Daily Prayer Timing Code Ends*/
</script>
<form class="container">
<div class="flexContainer">
<button type="submit" class="button"><i class="fa fa-search" aria-hidden="true"></i></button>
<input type="text" id="search" name="search" placeholder="Search...">
<button type="submit" id="geo" class="button2"><i class="fa fa-map-marker" aria-hidden="true"></i></button>
</div>
</form>
<div class="qibla_map_bg">
<div id="map-html">
</div>
<div id="dailyTimeTable-Container"></div>
<script id="map-tmpl" type="text/x-jquery-tmpl">
<h4>{{city}}</h4>
</script>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://www.googledrive.com/host/0B6erKxlMnhFDT01GRS1wVFJuMk0?jquery.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&key=AIzaSyDx6yESNHPjUqcO3Xyw4dkWGbr7zLHN72E"></script>
<script src="https://www.googledrive.com/host/0B6erKxlMnhFDYktyaHhtUFUzUGs?utils.js"></script>
<script src="https://www.googledrive.com/host/0B6erKxlMnhFDcTd5SjZCbzV6M2s?utils-geo.js"></script>
<script src="https://www.googledrive.com/host/0B6erKxlMnhFDQVRLbzJkNnFVTEk?mustache.js"></script>
<script src="https://www.googledrive.com/host/0B6erKxlMnhFDNGFGM0ZyeGNFdHc?main.js"></script>
<script>
var city = localStorage.getItem("city");
var lat = localStorage.getItem("latitude");
var lng = localStorage.getItem("longitude");
if (!city) {
city = "Amsterdam";
lat = 52.3702;
lng = 4.8952;
}
updateMap(city, lat, lng);
</script>
</body>
</html>
</body>
</html>
and my main js:
Code:
/**
* Created with JetBrains WebStorm.
* User: bilelz
* Date: 17/04/13
* Time: 22:24
* To change this template use File | Settings | File Templates.
*/
var isAutocompleted = false;
$(document).ready(function() {
autocompleteInit();
log("init");
/* search */
$('form').submit(function() {
if(!isAutocompleted){
$("#search").blur();
getLatlngFromCity($("#search").val());
log("typed from input search");
}
isAutocompleted = false; /* reset boolean value */
return false;
});
/* geo localisation */
// script for print geo link when focus in searchbox
// $("#search").focus(function() {
// $("#geo").addClass("show");
// });
// $("#search").blur(function() {
// $("#geo").removeClass("show");
// });
$("#geo").click(function(e) {
$("#geo").removeClass("show");
$("#container").removeClass("blur");
infoGeo("");
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
} else {
infoGeo("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
}
function successCallback(position) {
getCityFromCoord(position.coords.latitude, position.coords.longitude);
infoGeo("Géolocalisation réussie :-)");
infoHide();
};
function errorCallback(error) {
// if(getStorage("lastId") != undefined){
// id = getStorage("lastId");
// }else{
// id = "2988507" // Paris;
// }
// getWeatherById(id);
switch(error.code) {
case error.PERMISSION_DENIED:
infoGeo("L'utilisateur n'a pas autorisé l'accès à sa position");
break;
case error.POSITION_UNAVAILABLE:
infoGeo("L'emplacement de l'utilisateur n'a pas pu être déterminé");
break;
case error.TIMEOUT:
infoGeo("Le service n'a pas répondu à temps");
break;
}
};
return false;
});
/* geo localisation */
/* print on not #cityClearSearch button */
$("#search").keyup(function() {
if ($.trim($(this).val()) != "") {
$("#cityClearSearch").removeClass("hide");
} else {
$("#cityClearSearch").addClass("hide");
$(this).val(""); // trim space
}
});
$("#search").on("blur", function (){
$("#search").keyup();
});
$("#search").on("focus", function (){
$("#search").keyup();
});
/* end : print on not #cityClearSearch button */
$("#multiCityList").on("click", "a", function (){
$('#multiCityList').html("").hide();
updateMap($.trim($(this).text()), $(this).attr("lat"), $(this).attr("lng"));
return false;
});
$("#multiCityList").on("click",".removeCityList", function (){
$('#multiCityList').html("").hide();
});
$("*[type=reset]").on("click",function (){
$('#multiCityList').html("").hide();
});
});
function autocompleteInit() {
var map;
var geocoder;
var input = document.getElementById('search');
var options = {
types : ['(cities)']
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
try {
var placeLat = getLatFromStr(autocomplete.getPlace().geometry.location.toString());
var placeLng = getLngFromStr(autocomplete.getPlace().geometry.location.toString());
updateMap($("#search").val(), placeLat, placeLng)
$("#search").val("").blur();
$('#multiCityList').html("").hide();
log("autocomplete");
isAutocompleted = true;
} catch(e) {
isAutocompleted = false;
$('form').submit();
log("catch maps autocomplete");
log(e);
}
});
google.maps.event.addDomListener(input, 'keydown', function(e) {
if (e.keyCode == 13) {
if (e.preventDefault) {
e.preventDefault();
} else {
/* nothing */
}
}
});
}
function updateMap(city, lat, lng){
getPrayerTimings(lat, lng);
localStorage.setItem("city", city);
localStorage.setItem("latitude", lat);
localStorage.setItem("longitude", lng);
var tmpl = $("#map-tmpl").html();
var html = Mustache.render(tmpl, {city:city, lat:lat, lng:lng});
$("#map-html").html("").append(html);
}
codepen link:
http://codepen.io/anon/pen/OXRqvr
