We Keep Coding

Passing user input to Javascript variable in order to change api results

Like the title suggests, I'm trying to allow the user to manually change the javascript coordinate variables in order to get a list of results based off of the coordinates that they entered. I managed to save latitude and longitude into variables which can be plugged into the api key. However I just can't figure out how to adjust those variables from html so that the user can adjust the coords without having to go into the javascript file. I'll attach the relevant code below.
Thanks!
Html
<input id="lat" placeholder="Enter the latitude of your desired hiking location">
<input id="long" placeholder="Enter the longitude of your desired hiking location">
<button value="send" id="submit" onclick="latFunc(); longFunc() ">Search</button>
Javascript
let latitude = "40.2398"
let longitude = "-76.9200"
function latFunc() {
let latitude = document.getElementById("lat").value;
console.log(latitude);
}
function longFunc() {
let longitude = document.getElementById("long").value;
console.log(longitude);
}
latFunc();
longFunc();
$.getJSON("https://www.hikingproject.com/data/get-trails?lat=" + latitude + "&lon=" + longitude + "&maxDistance=10&key=*****************", function (data) {

Have your functions return the value, rather than assigning a variable.
function latFunc() {
return document.getElementById("lat").value;
}
function longFunc() {
return document.getElementById("long").value;
}
When calling the getJSON, use the values by returning value from lat/long inputs. Assuming this code gets executed on a click handler.
$.getJSON("https://www.hikingproject.com/data/get-trails?lat=" + latFunc() + "&lon=" + longFunc() + "&maxDistance=10&key=*****************", function (data) ...
When you initialize, assign your lat/long. You could also encapsulate this into methods.
document.getElementById("lat").value = "40.6";
document.getElementById("long").value = "-75";

Seems like you use jQuery here, here's a complete func handler for click with console to show you the requested URL value.
$("#submit").click(function(e) {
e.preventDefault();
const latitude = $("#lat").val() ;
const longitude =$("#long").val();
console.log(latitude);
console.log(longitude);
var url = "https://www.hikingproject.com/data/get-trails?lat=" + latitude + "&lon=" + longitude + "&maxDistance=10&key=*****************";
console.log(url);
$.getJSON(url, function (data) {
console.log(data);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="lat" value="40.2398" placeholder="Enter the latitude of your desired hiking location">
<input id="long" value="-76.9200" placeholder="Enter the longitude of your desired hiking location">
<button value="send" id="submit">Search</button>
But in case you want to stick with what you have done so far:
function callApi() {
const latitude = document.getElementById("lat").value;
let longitude = document.getElementById("long").value;
console.log("latitude: " + latitude);
console.log("longitude: " + longitude);
var url = "https://www.hikingproject.com/data/get-trails?lat=" + latitude + "&lon=" + longitude + "&maxDistance=10&key=*****************";
console.log(url);
$.getJSON(url, function (data) {
console.log(data);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="lat" placeholder="Enter the latitude of your desired hiking location">
<input id="long" placeholder="Enter the longitude of your desired hiking location">
<button value="send" id="submit" onclick="callApi() ">Search</button>

How to clear textbox after unchecking checkbox without textbox disappearing (JavaScript)

I am new to HTML, CSS, and JavaScript, so please bear with me.
I am trying to create a form which has an element that uses geolocation to get the current location of a user when user checks a checkbox, and it inputs the coordinates inside a textbox that I've set up. This works fine, but when I uncheck the checkbox, the coordinates disappear along with the textbox.
How do I clear just the coordinates without making the textbox disappear as well?
Below is my code:
function getLocation(myCheck) {
var x = document.getElementById("place");
if (myCheck.checked) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation disabled or unavailable.";
}
function showPosition(position) {
x.innerHTML = position.coords.latitude + ", " + position.coords.longitude;
}
} else {
x.innerHTML = "";
}
}
<h4> Coordinates: <label id="place"><input type="text"></label><label>Use current location? <input id="myCheck" onclick="getLocation(this)" type="checkbox"></label>
</h4>

To empty an input you need to set the value instead of innerHTML. Also note you can avoid creating an input inside the label tag by just using the id & for attribute
function getLocation(myCheck) {
var x = document.getElementById("place");
if (myCheck.checked) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.value = "Geolocation disabled or unavailable.";
}
} else {
x.value = "";
}
}
function showPosition(position) {
x.innerHTML = position.coords.latitude + ", " + position.coords.longitude;
}
<h4> Coordinates: <label for="place">
<input id ="place" type="text"></label>
<label for="myCheck">Use current location?
<input id="myCheck" onclick="getLocation(this)" type="checkbox">
</label>
</h4>

Could you try?
document.getElementById('myCheck').value = "";

How to get the current address by google api in input type text

I have got the current location with complete address and shown this in a <span> by ID. But i want to show this address in input type text also. My current code is
<script type="text/javascript">
var positionlatitude;
var positionlongitude;
var address;
google.maps.event.addDomListener(window, 'load', function () {
var places = new google.maps.places.Autocomplete(document.getElementById('location_#item.Name'));
google.maps.event.addListener(places, 'place_changed', function () {
var place = places.getPlace();
address = place.formatted_address;
positionlatitude = place.geometry.location.lat();
positionlongitude = place.geometry.location.lng();
});
});
navigator.geolocation.getCurrentPosition(success);
function success(position) {
var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';
$.getJSON(GEOCODING).done(function (location) {
$('span[id^="address"]').html(location.results[0].formatted_address);
})
}
</script>
<label for="location">Your Location: </label><br />
<span id="address" class="input-form" ></span>
<input type="text" value="" name="address" id="geolocation"/>

Thanks To everyone If you consider this question.
now i got the answer.
document.getElementById("geolocation").value = location.results[0].formatted_address;
<input type="hidden" value="" name="address" id="geolocation"/>
This will set the address in input type hidden

Is Google api limit based on ip or page ? client side scripting avoid limit crossing?

In my server i am using some function to find out pickup and drop lat and lang , direction from google map api services,so limit is crossed some days so i have desiede to go with user side scripting to calculate all google api service using following code this will help me ?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body onload="geolocate1()">
<input type="text" id="pickup" onFocus="geolocate()" placeholder="Enter your pick up place" />
<input type="text" id="plat" value="" id="plat"/>
<input type="text" id="plang" value="" id="plang"/>
<input type="text" id="pstatuslat" value="error" />
<input type="text" id="km" />
</br>
</br>
<input type="text" id="drop" onFocus="geolocate1()" placeholder="Enter your Drop off place"/>
<input type="text" id="dlat" value="" id="plat"/>
<input type="text" id="dlang" value="" id="plang"/>
<input type="text" id="dstatuslat" value="error" />
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
<input type="button" onclick="GetLocation1();GetLocation();calcRoute();" value="Book Now" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script type="text/javascript">
<!--
function GetLocation() {
var geocoder = new google.maps.Geocoder();
var address = document.getElementById("pickup").value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
document.getElementById('plang').value= longitude;
document.getElementById('plat').value= latitude;
document.getElementById('pstatuslat').value= "ok";
} else {
document.getElementById('pstatuslat').value= "error";
}
});
};
function GetLocation1() {
var geocoder = new google.maps.Geocoder();
var address = document.getElementById("drop").value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
document.getElementById('dlang').value= longitude;
document.getElementById('dlat').value= latitude;
document.getElementById('dstatuslat').value= "ok";
} else {
document.getElementById('dstatuslat').value= "error";
}
});
};
//-->
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
var autocomplete;
function geolocate1() {
// Create the autocomplete object, restricting the search
var input = document.getElementById('pickup');
var options = {types: ["geocode"],componentRestrictions: {country: 'uk'}};
autocomplete = new google.maps.places.Autocomplete(input, options);
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
function geolocate() {
// Create the autocomplete object, restricting the search
// to geographical location types.
var input = document.getElementById('drop');
var options = {types: ["geocode"],componentRestrictions: {country: 'uk'}};
autocomplete = new google.maps.places.Autocomplete(input, options);
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
var directionsService = new google.maps.DirectionsService();
function calcRoute() {
var start = document.getElementById('pickup').value;
var end = document.getElementById('drop').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var route = response.routes[0];
var km = parseFloat(route.legs[0].distance.text.replace(" km", ""));
document.getElementById('km').value = km * 0.6214;
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>

Google API is limited with your Key using. Doesnt matter, if you have the same IP or different, each call to the Google API with you registered Key will be counted.
F.e. using Google Elevation API is limited for 2500 calls each day, doesnt matter, who is calling this, its limited to you API Key.

how to find lat ,long of a given area using pin code

hi i am using Bing map in my website and want lat long to pinpoint that location on Bing map. my question is in my website how can i get lat long of an area using pincode. Is there any api that i can use to query lat long with by giving area pin code. i want to do it in backend. using some ajax call to that particular web api and get back lat lang and saved it into database so that i can use that lat long to plot location on my bing map.
i am using bing map 7 where i need to put lat long value into a json object and pass it into Bing map.
function GetMap()
{
var mapOptions = {
credentials: "Your Bing Maps Key",
center: new Microsoft.Maps.Location(47.592, -122.332), // i want these value in my database
mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
zoom: 17,
showScalebar: false
}
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
}
i can hard code it but in my application i have given client an option which is use to add new location so in back end i want it like when client add any new location it automatically save its lat long also.
thanks

Using pincodes for obtaining the lat, long values may not be the best solution, since pin codes though popular for more than a century are still not a standard round the world. for example in US pincodes (zip codes) are normally have 5 digits (i.e. 06160) and in my part of the world their are normally 6 digits or more..
Though you can use combination of street address, state, country and pin code to find out the nearly correct geo coordinates for almost every part of the world. See following script which calls google api for finding the Lat, Long value... Here by I donate this code to the community under GPL:-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> </script>
<script src="http://maps.google.com/maps?file=api&v=3&key=ABQIAAAA7j_Q-rshuWkc8HyFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" type="text/javascript"> </script>
<script type="text/javascript">
var geocoder, location1;
function initialize() {
geocoder = new GClientGeocoder();
}
function prepareQuery(){
var query='';
var a1 = document.getElementById('address1').value;
var a2 = document.getElementById('address2').value;
var a3 = document.getElementById('address3').value;
var cty = document.getElementById('city').value;
var stat = document.getElementById('state').value;
var cntry =document.getElementById('country').value;
var pin = document.getElementById('pincode').value;
if(a1 != null && a1!=''){
query = query + a1 + ",";
}
if(a2 != null && a2!=''){
query =query + a2 + ",";
}
if(a3 != null && a3!=''){
query = query + a3 + ",";
}
if(cty != null && cty!=''){
query = query + cty + ",";
}
if(stat != null && stat!=''){
query = query + stat + ",";
}
if(cntry != null && cntry!=''){
query = query + cntry + ",";
}
if(pin != null && pin!=''){
query = query + pin + ",";
}
// alert("Prepare Query Returns " +query);
return query;
}
function submitFunc(){
var location = prepareQuery();
geocoder.getLocations(location, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode the address");
}
else
{
location1 = {latitude: response.Placemark[0].Point.coordinates[1], longitude: response.Placemark[0].Point.coordinates[0], Address : response.Placemark[0].address};
var items = [];
$.each(location1, function(key, value){
items.push('<li id="' + key + '">' + key +" : "+ value + '</li>');
});
// alert(items)
$("body").append("Results is :-");
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('body');
}
});
}
</script>
and the html looks like....
Line 1 : <input type="text" id="address1" value="" placeholder="Enter first line of address."/> <br></br>
Line 2 :<input type="text" id="address2" value="" placeholder="Enter second line of address."/> <br></br>
Line 3 :<input type="text" id="address3" value="" placeholder="Enter third line of address."/> <br></br>
City : <input type="text" id="city" value="" placeholder="Enter city name."/> <br></br>
State : <input type="text" id="state" value="" placeholder="Enter state name."/> <br></br>
Country : <input type="text" id="country" value="" placeholder="Enter country name."/> <br></br>
Pin Code : <input type="text" id="pincode" value="" placeholder="Enter pincode value."/> <br></br>
<input type="button" name="submitBtn" value="submit" onclick='submitFunc();'/> <br></br>
<h3> <strong> Your Results Will be displayed Here . . . .</strong> </h3>

Geonames is a good service for all kind of location stuff, take a look at the list of the services they provide:
http://www.geonames.org/export/ws-overview.html
Could you use the one to look up postal codes? api.geonames.org/postalCodeLookupJSON?postalcode=6600&country=AT&username=demo