I need to add Autocomplete to input fields by ClassName. I got it to work but Google does not sent the Address with Postalcode back.
So I am trying to use addListener to insert the formatted_address on the input field.
In this example the input[i] on the autocomplete.addListener is not working:
function initMap() {
var input = $('.my_adresse');
for (i = 0; i < input.length; i++) {
var autocomplete = new google.maps.places.Autocomplete(input[i], {
types: ['address'],
componentRestrictions: {
'country': ["de", "ch", "aut"]
}
});
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
$(input[i]).val(place.formatted_address);
});
}
}
On this example only the last Element of the loop is working:
var input = $('.my_adresse');
for (i = 0; i < input.length; i++) {
var autocomplete = new google.maps.places.Autocomplete(input[i], {
types: ['address'],
componentRestrictions: {
'country': ["de", "ch", "aut"]
}
});
var input_to_change= input[i];
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
$(input_to_change).val(place.formatted_address);
});
}
}
Why am I getting just the last element of the loop?
What is the best solution to get the Complete Address with postal code using Google Maps places Autocomplete?
One way to address the issue is with function closure, create a createAutocomplete function to hold closure on the input and the autocomplete object:
function createAutocomplete(input, index) {
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ['address'],
componentRestrictions: {
'country': ["de", "ch", "aut"]
}
});
var input_to_change = input;
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
console.log(place);
$(input).val(place.formatted_address);
});
}
and call that in your loop:
for (i = 0; i < input.length; i++) {
createAutocomplete(input[i], i);
}
proof of concept fiddle
code snippet:
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.8688,
lng: 151.2195
},
zoom: 13
});
var bounds = new google.maps.LatLngBounds();
var input = $('.my_adresse');
for (i = 0; i < input.length; i++) {
createAutocomplete(input[i], i);
}
function createAutocomplete(input, index) {
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ['address'],
componentRestrictions: {
'country': ["de", "ch", "aut"]
}
});
var input_to_change = input;
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
console.log(place);
if (place != null) {
$(input).val(place.formatted_address);
if (place.geometry.location) {
var marker = new google.maps.Marker({
position: place.geometry.location,
map: map,
title: "" + index
});
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
}
}
});
}
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 70%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pac-card" id="pac-card">
<div>
<div id="title">
Autocomplete search
</div>
</div>
<div id="pac-container">
<input id="pac-input" class="my_adresse" type="text" placeholder="Enter a location">
</div>
<div>
<input class="my_adresse" type="text" placeholder="Enter a location">
</div>
<div>
<input class="my_adresse" type="text" placeholder="Enter a location">
</div>
<div>
<input class="my_adresse" type="text" placeholder="Enter a location">
</div>
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>
Related
I am having issues displaying data from localStorage into my HTML page, when I open the console the data is been saved, the issue is with innerhtml.
Below is both my html and JS code.
When i run the console, I can see that my data is saved on localStorage, the issue is inputing that data into the page
Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fizzle</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
</head>
<body class="">
<div class="row">
<div class="col">
<ul class="workouts">
<section class="weather">
<div id="today-container">
<div class="current-weather">
<h3 class="brand">the weather</h3>
</div>
<div>
<h1 class="temp">16°</h1>
<div class="city-time">
<h1 class="name">London</h1>
<small>
<span class="date">Monday Sep 19</span>
</small>
</div>
</div>
</section>
<form class="form hidden">
<div class="form__row">
<label class="form__label">Type</label>
<select class="form__input form__input--type">
<option value="running">Running</option>
<option value="cycling">Cycling</option>
</select>
</div>
<div class="form__row">
<label class="form__label">Distance</label>
<input id="distance-input"
class="form__input form__input--distance"
placeholder="km"
/>
</div>
<div class="form__row">
<label class="form__label">Duration</label>
<input id="duration-input"
class="form__input form__input--duration"
placeholder="min"
/>
</div>
<div class="form__row">
<label class="form__label">Elevation</label>
<input id ="elevation-input"
class="form__input form__input--cadence"
placeholder="meters"
/>
</div>
<button class="form__btn">OK</button>
</form>
</ul>
</div>
<div class="col">
<div id="map"></div>
</div>
<p> <h4 class="ElementThatHoldsTheHistoryData"></h4></p>
</div>
<div id="floating-panel"></div>
<div id="sidebar"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=API Key here"
defer>
</script>
<!-- <script async defer src="https://maps.googleapis.com/maps/api/js?key=APIkey here=initMap&libraries=geometry"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Here is my JS code:
enter code her/Get all necessary elements from the DOM
const temp = document.querySelector(".temp");
const dateOutput = document.querySelector(".date");
const timeOutput = document.querySelector(".time");
const distance = document.querySelector("#distance-input");
const duration = document.querySelector("#duration-input");
const elevation = document.querySelector(".form__input--elevation");
const todayContainer = document.querySelector("#today-container");
// set my variables
var currentWeather = document.querySelector(".current-weather");
var APIkey = "&appid=99d1a7e58f500ed377f1399b47f88c6a";
var distanceInput = document.getElementById("distance-input");
var durationInput = document.getElementById("duration-input");
var elevationInput = document.getElementById("elevation-input");
var map;
var markers = [];
var directionsService;
var directionsRenderer;
var workoutElements = document.getElementsByClassName("workout");
var btn = document.querySelector(".form__btn");
//Default city when the page loads/------------------------------------------------------------
let cityInput = "London";
/// Get date /----------------------------------------------------------------------------------------------------------------
const date = moment().format("h:mm a - dddd MMM YY");
dateOutput.innerText = date;
// console.log(date);
// Google map
// map code with 2 markers and directions-----working code------------------------
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 51.509865, lng: -0.118092 }, //center mapp to Hyde park London
zoom: 12.5,
});
directionsService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
directionsRenderer.setOptions({
polylineOptions: {
strokeColor: "red",
},
suppressMarkers: true,
});
// Add a click event listener to the map
google.maps.event.addListener(map, "click", function (event) {
addMarker(event.latLng);
});
}
function addMarker(location) {
// Add the marker at the clicked location
var marker = new google.maps.Marker({
position: location,
map: map,
});
markers.push(marker);
if (markers.length >= 2) {
calculateAndDisplayRoute();
}
}
function deleteMarkers() {
// Clear markers from the map
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
}
//function to add distance and duration:
function calculateAndDisplayRoute() {
var request = {
origin: markers[0].getPosition(),
destination: markers[1].getPosition(),
travelMode: "BICYCLING",
provideRouteAlternatives: true,
unitSystem: google.maps.UnitSystem.METRIC,
};
directionsService.route(request, function (response, status) {
if (status === "OK") {
directionsRenderer.setDirections(response);
var distance = response.routes[0].legs[0].distance.text;
var duration = response.routes[0].legs[0].duration.text;
var elevation = response.routes[0].legs[0].elevation;
// set input values
document.getElementById("distance-input").value = distance;
document.getElementById("duration-input").value = duration;
document.getElementById("elevation-input").value = elevation;
} else {
window.alert("Directions request failed due to " + status);
}
});
}
function getLocation() {
navigator.geolocation.getCurrentPosition((data) => {
const lat = data.coords.latitude;
const lon = data.coords.longitude;
initMap(lat, lon);
currentConditions(lat, lon);
});
}
//Weather
//fetch data from current weather api, and display desired data on the page
function currentConditions(lat, lon) {
let currentWeatherAPI = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}${APIkey}&units=metric`;
const tempDisplay = document.querySelector(".temp");
const cityname = document.querySelector(".name");
fetch(currentWeatherAPI)
.then(function (response) {
return response.json();
})
.then(function (wdata) {
// city's name, and use moment to get the date
// var city = getLocation();
// weather condition icon
var weatherIcon = wdata.weather[0].icon;
//add
tempDisplay.innerText = Math.round(wdata.main.temp) + "°";
cityname.innerText = wdata.name;
});
}
getLocation();
// local storage
btn.addEventListener("click", function (event) {
event.preventDefault();
// Clear form
distance.value = "";
duration.value = "";
// Clear markers from the map
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
var rides = JSON.parse(localStorage.getItem("rides")) || []; // Add new ride to existing rides data in LS
var newRide = { distance: distance.value, duration: duration.value };
rides.push(newRide);
localStorage.setItem("rides", JSON.stringify(rides));
// for loop to iterate through the collection of elements and set the innerHTML property of each element to the stored data.
var element = document.querySelector("ElementThatHoldsTheHistoryData");
for (let i = 0; i < rides.length; i++) {
var h4 = document.createElement("p");
h4.textContent = `The Distance was ${rides[i].distance} and the Duration was ${rides[i].duration}`;
element.appendChild(h4);
}});
Arrange your p tag like this
const h4 = `<p>The Distance was ${rides[i].distance} and the Duration was ${rides[i].duration}</p>`
Instead of document.querySelector I would prefer to use getElementById or className
document.getElementById('question-header').append(h4)
Finally, append your HTML to the Id
I have to select a marker in a map based on the button click. I have multiple marker with each marker associated to button below. I want to change "myloc" on that button click and by default it must select 13, 100.
Html
<div class="row">
<input type="button" id="btn-first" class="btn-a" value = "First">
<input type="button" id="btn-second" class="btn-a" value = "Second">
</div>
JS
let myloc = new L.LatLng(13, 100);
var map = L.map('map').setView(myloc, 12);
$(function () {
$('.btn-a').on('click', function(e){
e.preventDefault();
var clsName = $(this).val();
var lat, long;
if (clsName == 'First') {
lat = 13;
long = 100;
} else if(clasName = 'Second') {
lat = 14;
long = 101;
}
})
});
I dont see you setting the myLoc object anywhere. You are just assigning value for lat, lng. Check the snippet below to see if it answers your question.
Here, you initiliaze myLoc and on button click get new values for lat, lng and set it at the end again for myLoc
//just a temp function to show the example. Dont add this in your code
var L = {
LatLng: function(lat, lng) {
console.log("Current Values for Lat, Lng: " + lat + " , "+ lng);
}
}
let myloc = new L.LatLng(13, 100);
//var map = L.map('map').setView(myloc, 12);
$(function () {
$('.btn-a').on('click', function(e){
// e.preventDefault();
var clsName = $(this).val();
var lat, long;
if (clsName == 'First') {
lat = 13;
long = 100;
} else if(clasName = 'Second') {
lat = 14;
long = 101;
}
//set the myloc here
myloc = new L.LatLng(lat, long);
//then map again
//L.map('map').setView(myloc, 12)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<input type="button" id="btn-first" class="btn-a" value = "First">
<input type="button" id="btn-second" class="btn-a" value = "Second">
</div>
Below is an approach you can use, similar to what you we're doing. The example uses event delegation to monitor button clicks and then sets the lat and long variables accordingly. Those variables are then used to update the value of the global myLoc. I used an object literal in place of your new L.LatLng object for simplicity.
let myLoc = {
lat: 13,
long: 100
};
//new L.LatLng(13, 100);
document.querySelector('.row').addEventListener('click', function(e) {
if (e.target.type === 'button') {
let lat = 0;
let long = 0;
if (e.target.id === 'btn-first') {
lat = 13;
long = 100;
} else if (e.target.id === 'btn-second') {
lat = 14;
long = 101;
}
myLoc = {
lat,
long
};
console.log(`myLoc.lat: ${myLoc.lat}; myLoc.long ${myLoc.long}`);
//new L.LatLng(lat, long);
}
});
<div class="row">
<input type="button" id="btn-first" class="btn-a" value="First">
<input type="button" id="btn-second" class="btn-a" value="Second">
</div>
$(document).ready(function () {
$('.btn-a').each(function () {
$(this).click(function () {
var $this = $(this).val();
if ($this == 'First') {
$(this).val('One');
} else if ($this == 'Second') {
$(this).val('Two');
}
})
});
});
I am messing with the google maps API and using angular, and I am having an issue binding the data from the API to a variable and displaying it correctly with an ng-repeat. The ng-repeat is supposed to list the name property of the place objects, but it does not do that unless I enter the same zipcode twice. Here is the html:
<!DOCTYPE html>
<html ng-app = "openApp">
<head>
<meta charset="utf-8">
<title>Open Sesame</title>
<script src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyArO1n-5w8xxPblR_aDxV6Ul1VLik3_pRY&libraries=places"></script>
<script src = "vendors/angular/angular.min.js"></script>
<script src = "assets/scripts/composite.all.min.js"></script>
<link rel = "stylesheet" href = "assets/styles/style.css" />
</head>
<body ng-controller = "MainController as main">
<h1>Is it open?</h1>
<!-- <button ng-click = ""></button> -->
<div id = "googleMap"></div>
<form>
<input type = "text" ng-model = "main.zipcode"/>
<input type = "submit" ng-click = "main.enterZip()" />
</form>
<div id = "displayInfo">
<ul>
<li ng-repeat = "item in main.openPlaces">
test {{item.name}}
</li>
</ul>
</div>
</body>
</html>
and here is the client side javascript:
angular.module('openApp', [])
.controller('MainController', ['$http', function($http){
var vm = this;
vm.latitude;
vm.longitude;
vm.openPlaces = [];
initialize();
vm.enterZip = function(){
$http.get('/zipcodeApi/'+ vm.zipcode)
.then(function(response){
vm.latitude = response.data.lat;
vm.longitude = response.data.lng;
initialize();
})
}
function initialize(){
var mapLocation = new google.maps.LatLng(vm.latitude, vm.longitude);
var openNow = [];
var mapProp = {
center: mapLocation,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var placesRequest = {
location: mapLocation,
radius: '2000',
types: ['restaurant'],
keyword: 'restaurant',
};
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(placesRequest, function(results, status) {
if(status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var listedHours = results[i].opening_hours;
if(typeof listedHours != 'undefined' && listedHours.open_now === true){
openNow.push(results[i]);
var place = results[i];
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
}
}
}
vm.openPlaces = openNow;
})//closes nearbySearch()
}
}]);
MainController would work because you named your controller MainController in the JS file. And that's the same reason MainController as main won't work.
I'm new to google maps api ,i'm trying to draw polygons using google maps api , I want to show the project of the polygon and that project polygon above (inside) allow to draw the building polygon.
I'm trying to clear all my polygon objects before I import new geoJSON data and create new objects.I can't seem to get the setMap(null) function to work correctly. Hopefully someone can kindly let me know where I am failing.
demo
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry,places&sensor=true"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<input type="hidden" id="center_point" value="12.939884,77.62540710000007" />
<input type="hidden" id="projectPolygon" value="" />
<input type="hidden" id="autocompleteLat" value="12.939884" />
<input type="hidden" id="autocompleteLng" value="77.62540710000007" />
<input type="hidden" id="poly_map_codes" value="" />
<input type="hidden" id="zoom_level" value="18" />
<textarea id="xml_valuesMain" style="display:none;">[{"source":"project","latlng":[{"lat":"12.940573081014005","lng":"77.62384235858917"},{"lat":"12.940656731834343","lng":"77.62625098228455"},{"lat":"12.939532671591135","lng":"77.6263153553009"},{"lat":"12.939564040782932","lng":"77.62391209602356"}]}]</textarea>
<textarea id="xml_values" style="display:none;">[{"source":"project","latlng":[{"lat":"12.940573081014005","lng":"77.62384235858917"},{"lat":"12.940656731834343","lng":"77.62625098228455"},{"lat":"12.939532671591135","lng":"77.6263153553009"},{"lat":"12.939564040782932","lng":"77.62391209602356"}]}]</textarea>
<div id="init_map" style="height: 600px;"></div>
<script>
$(function(){
initMap();
});
function initMap()
{
var polygons = [];
var coordinates = [];
var markers=[];
var latt=$('#autocompleteLat').val();
var lngg=$('#autocompleteLng').val();
var amsterdam = new google.maps.LatLng(latt,lngg);
var zoom_level=parseInt($('#zoom_level').val());
var map = new google.maps.Map(document.getElementById('init_map'),{ center: amsterdam, zoom: zoom_level, mapTypeId:google.maps.MapTypeId.SATELLITE });
drawSecondPolygon();
function drawSecondPolygon()
{
google.maps.event.trigger(map, 'refresh');
var data =$('#xml_values').val();
var jsonData = JSON.parse(data);
var polygons = [];
console.log("polygon length="+polygons.length);
for( var i = 0; i < polygons.length; i++ )
{
polygons[i].setMap(null)
}
polygons.length = 0;
for (var i = 0; i < jsonData.length; i++)
{
var latArr = jsonData[i].latlng;
var source_d = jsonData[i].source;
arr = [];
for(j=0; j<latArr.length;j++)
{
var lat=latArr[j].lat;
var lng=latArr[j].lng;
arr.push(new google.maps.LatLng(parseFloat(lat),parseFloat(lng)));
}
if(source_d=="project") { var FillColor='#DA70D6'; var StrokeColr='#BA55D3'; var editval=false; }
else if(source_d=="tower") { var FillColor='#FF8800'; var StrokeColr='#FF8800'; var editval=true; }
else if(source_d=="amenity") { var FillColor='#990000'; var StrokeColr='#990000'; var editval=false; }
else { var FillColor='#66FF00'; var StrokeColr='#66FF00'; var editval=false; }
polygons.push(new google.maps.Polygon({
paths: arr,
Source:source_d,
strokeColor: StrokeColr,
strokeOpacity: 0.8,
strokeWeight: 2,
editable:editval,
clickable:true,
fillColor: FillColor,
fillOpacity: 0.35
}));
console.log("polygons.length="+polygons.length);
polygons[polygons.length-1].setMap(null);
polygons[polygons.length-1].setMap(map);
if(editval==false)
{
console.log("Something working fine");
google.maps.event.addListener(polygons[polygons.length-1], 'click', function (clickEvent)
{
polygons[polygons.length-1].setMap(null);
var newLatLng=$('#poly_map_codes').val();
var clickEventLat=clickEvent.latLng.lat();
var clickEventLng=clickEvent.latLng.lng();
if(newLatLng!='') { newLatLng+=","+clickEventLat+" "+clickEventLng; }
else { newLatLng+=clickEventLat+" "+clickEventLng; }
$('#poly_map_codes').val(newLatLng);
//console.log(newLatLng);
//drawSecondPolygon();
if(newLatLng)
{
var getLatLng=newLatLng;
var getLatLngArr=getLatLng.split(",");
var main_LatLngArr=[];
for(i=0; i<getLatLngArr.length; i++)
{
var my_object={};
var getLatLngExp=getLatLngArr[i].split(" ");
my_object.lat=getLatLngExp[0];
my_object.lng=getLatLngExp[1];
main_LatLngArr.push(my_object);
}
var LatLngObj={};
LatLngObj.source="tower";
LatLngObj.latlng=main_LatLngArr;
var oldPolyArr=$('#xml_valuesMain').val();
var oldPolyArr=JSON.parse(oldPolyArr);
oldPolyArr.push(LatLngObj);
$('#xml_values').val(JSON.stringify(oldPolyArr));
polygons[polygons.length-1].setMap(null);
drawSecondPolygon();
console.log("oldPolyArr="+JSON.stringify(oldPolyArr));
}
});
}
}
}
}
</script>
At a first look you redeclare the var polygons = []; in your drawSecondPolygon function this override the content of the same variable declared in initMap ..
thi comment this line .. so you can use always the parent polygons array
function drawSecondPolygon()
{
google.maps.event.trigger(map, 'refresh');
var data =$('#xml_values').val();
var jsonData = JSON.parse(data);
//var polygons = [];
Here is the code I have so far. Someone posted it for people to use. It calculates distance well but when I try to calculate my delivery cost, it wont give me an error but it also won't output the value. The "$?" stays the same. I don't have a lot of experience coding and I've tried a number of things. I'm at a loss here. Please help!
<font face="cookie"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<!-- Browser key 1 -->
<script src="http://maps.google.com/maps? file=api&v=2&key=AIzaSyA9kMASRkOAbPFdzd4u5o_F0JyXKieOSQk" type="text/javascript"></script>
<script type="text/javascript">
//Initialize location vars
var location1;
var location2;
$(document).ready(function() {
console.log('test');
initialize();
//Grab the address values from the form on submit, and then run the maps code
$('#map-form').submit(function(event) {
//Also, stop the form from actually submitting
event.preventDefault();
address1 = $('#address1').val();
address2 = $('#address2').val();
//Run it, baby!
showLocation();
});
});
var geocoder, location1, location2;
function initialize() {
//Create new object of the google maps api
geocoder = new GClientGeocoder();
}
function showLocation() {
geocoder.getLocations(address1, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode address 1");
}
else
{
location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
geocoder.getLocations(address2, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode address 2");
}
else
{
location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
calculateDistance();
}
});
}
});
}
function calculateDistance()
{
try
{
var glatlng1 = new GLatLng(location1.lat, location1.lon);
var glatlng2 = new GLatLng(location2.lat, location2.lon);
var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);
var kmdistance = (miledistance * 1.609344).toFixed(1);
//Write the value wherever you want!
$('#mile_distance').html(miledistance);
}
catch (error)
{
alert(error);
}
}
price = $('#price').val();
delivery = $('#delivery').val();
var miles = mile_distance - 25;
if (miles<0)
{
miles = 0;
}
var C = (miles * .575);
$('#price').val(C.toFixed(2));
var delivery_cost = 10;
var D = (delivery_cost + price);
$('#delivery').val(D.toFixed(2));
</script>
<form id="map-form">
<input type="text" placeholder="Address 1" id="address1" />
<input type="text" placeholder="Address 2" id="address2" />
<input type="submit" value="Submit" />
</form>
<p>The distance is: <span id="mile_distance">?</span> miles</p>
<p>Your delivery cost is: $<span id="delivery">?</span> </p>
</font>
The following code is not a part of any function and, therefore, will be executed immediately after it's loaded, even before your GUI fully appears on the screen.
price = $('#price').val();
delivery = $('#delivery').val();
var miles = mile_distance - 25;
if (miles < 0) {
miles = 0;
}
var C = (miles * .575);
$('#price').val(C.toFixed(2));
var delivery_cost = 10;
var D = (delivery_cost + price);
$('#delivery').val(D.toFixed(2));