Hi guys
Having a small problem with my search input. I have a timetable where visitors can get the prayer times for their location.
Now the problem every time i search for example a two worded city like New York or The Hague im getting wrong location. But searching like this Newyork and TheHague i am getting the right locations.
Searching for cities that are just one word does not have a lot of problems beside for example searching Düsseldorf i’m not getting any location at all. I looked at the firefox console and i am getting the following error.
Object { results: Array[0], status: "ZERO_RESULTS" }index.htm:86:19
TypeError: data.results[0] is undefined
But searching like this Dusseldorf and i’m getting the right location.
Something seems not right here it looks like using space in the input field is messing all things up i think. i have not come across this problem ever it seems just so weird it’s like the search input is doing what it wants.
Have uploaded the code to codepen so you can see the problem with the search function. Please use some examples for cities and see the problem in action
http://codepen.io/anon/pen/NbeMRZ
[CODE]
Monthly Prayer Timetable body, tr, form {font-size: 12px; color: #404040; text-align: center; margin: 0; padding: 0} pre {font-family: courier, serif, size: 10pt; margin: 0px 8px;} input {font-size: 12px;} .sheader {background:#eef; border-bottom: 1px solid #ddd; padding: 7px;} .caption {font-size: 20px; color: #d95722; text-align: center; width: 10em;} .arrow {font-weight: bold; text-decoration: none; color: #3D3D3D; } .arrow:hover {text-decoration: underline;} .command {font-weight: bold; text-decoration: none; color: #AAAAAA; } .command:hover {text-decoration: underline;} .timetable {border-width: 1px; border-style: outset; border-collapse: collapse; border-color: gray; margin: 0 auto;} .timetable td {border-width: 1px; border-spacing: 1px; padding: 1px; border-style: inset; border-color: #CCCCCC;} .head-row {color: black; background-color: #eef;} .today-row {background-color: #000; color: #fff} <script>
var key = 'AIzaSyDw0JuoW4_Hrbnhe8FmtbnB299AkM2lRzk';
var x=document.getElementById("detected_location");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{ x.innerHTML="Geolocation is not supported by this browser. Please enter your location below:";}
}
function showPosition(position)
{
var lati = position.coords.latitude; var longi = position.coords.longitude;
x.innerHTML="Latitude: " + lati +
"<br>Longitude: " + longi;
// var loc = document.getElementById('location');
// loc.value= lati + ',' + longi;
document.getElementById('latitude').value = lati;
document.getElementById('longitude').value = longi;
jQuery('.formatted_loc').html(lati+","+longi);
getGoogleLoc(lati,longi,false);
ga('send', {
'hitType': 'event', // Required.
'eventCategory': 'AJAX', // Required.
'eventAction': 'geolocation', // Required.
'eventLabel': 'Location Coords',
'eventValue': lati+','+longi
});
update();
}
function getGoogleLoc(lati,longi,address){
!!(address) ?address = encodeURI(jQuery('#location').val()) : address = false;
var dataString = {
sensor: true,
latlng: lati+","+longi
};
if(address) dataString['address'] = address;
var req = jQuery.ajax({
url: "https://maps.googleapis.com/maps/api/geocode/json",
type: "GET",
cache: false,
data: dataString,
dataType: "JSON"
});
req.done(function(data){
console.log(data);
if(data && data.results && data.results.length) var formattedLoc = data.results[0].formatted_address;
jQuery('.formatted_loc').html(formattedLoc);
var updatedLati = data.results[0].geometry.location.lat;
var updatedLongi = data.results[0].geometry.location.lng;
jQuery('#latitude').val(updatedLati);
jQuery('#longitude').val(updatedLongi);
update();
getTimeZone(updatedLati,updatedLongi);
ga('send', {
'hitType': 'event', // Required.
'eventCategory': 'AJAX', // Required.
'eventAction': 'Google Maps API', // Required.
'eventLabel': 'Geocoder Location',
'eventValue': formattedLoc
});
});
}
function getTimeZone(lati,longi){
jQuery.getJSON('https://maps.googleapis.com/maps/api/timezone/json?location='+lati+','+longi+'×tamp='+ +new Date()/1000, function(data){
var dst = data.dstOffset/3600;
var tz = data.rawOffset/3600;
jQuery('#dst').val(dst);
jQuery('#timezone').val(tz);
update();
ga('send', {
'hitType': 'event', // Required.
'eventCategory': 'AJAX', // Required.
'eventAction': 'Google Maps API', // Required.
'eventLabel': 'Timezone API',
'eventValue': tz
});
})
}
function initialize() {
var input = document.getElementById(‘location’);
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
<p>
<label for="location">Search your location:</label>
<input name="location" id="location" value="" onchange="getGoogleLoc(false,false,true)" type="text">
</p>
<h3 class="formatted_loc">Amsterdam, Netherlands</h3>
[/CODE]