I developed an application utilizing the Google JavaScript Maps API to identify the range in between addresses. I presently have a pest. When the individual clicks the row on the table it ought to highlight the chosen row by calling this feature: highlight_row().
When checking it does not highlight the row on the initial click. It requires to be clicked a 2nd time for it to highlight the row. Why does this feature not design the row on the initial click? Any kind of aid or advice would certainly be substantially valued. Many Thanks
When I include the highlight_row() feature to the worldwide extent, and after that call it independently on the onClick I obtain the very same outcome.
I likewise have actually attempted including the onclick inside the period on the table. This only permits the onclick to discharge off when the display screen name cell is clicked. Including the onClick in the period does design the chosen row on the initial click. Why does this job when in the tag and also not in the tag?
I will certainly include the code listed below. You will certainly require to include your very own google maps api crucial to examine in your area.
<.
<< html>>.
<< head>>.
<< title>> Range Estimation<.
<< manuscript src=" https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&libraries=places"><> < design>>.
table {
border-collapse: collapse;
size: 100%;
}
th,.
td {
boundary: 1px strong #ddd;
extra padding: 8px;
text-align: left;
}
th {
background-color: #f 2f2f2;
}
tr.highlighted {
background-color: blue;.
shade: white;/ * For much better exposure */.
}
<.
<< manuscript>>.
const destinationAddresses = {
destination1: {
Tour_Location: "Consular Office Suites by Hilton Parsippany",.
Display_Name: "Hilton Parsippany",.
Address1: "909 Parsippany Blvd",.
Address2: "",.
City: "Parsippany",.
State: "NJ",.
Zip: "07054",.
Tour_Location_Record_Id: "a1F1U000003VKSSUA4",.
Phone: "( 631) 260-1849",.
},.
destination2: {
Tour_Location: "Roosevelt Area Shopping Mall",.
Display_Name: "Roosevelt Area Shopping Mall",.
Address1: "second Flooring - Alongside Nordstrom",.
Address2: "630 The Old Country Rd",.
City: "Yard City",.
State: "NY",.
Zip: "11530",.
Tour_Location_Record_Id: "a1F1U000003UG8NUAW",.
Phone: "( 631) 260-1849",.
},.
destination3: {
Tour_Location: "Club Wyndham Midtown 45",.
Display_Name: "Downtown 45",.
Address1: "205 E 45th St",.
Address2: "",.
City: "New York City",.
State: "NY",.
Zip: "10017",.
Tour_Location_Record_Id: "a1F1U000003UbX8UAK",.
Phone: "( 555) 555-5555",.
},.
// Include even more location things if required.
};.
feature getAddress( location) {
return '$ {destination.Address1} $ {destination.Address2}, $ {destination.City}, $ {destination.State} $ {destination.Zip} ';.
}
feature SetTourLocationRecordId( recordId) {
console.log(' Trip Place Document Id: $ {recordId} ');.
const dataArray = recordId.split(",");.
const splitData = dataArray.map(( information) => > data.trim());.
const set_Tour_Location_Record_Id = splitData[0];// Outcome: a1F1U000003VKSSUA4.
const set_Tour_Location = splitData[1];// Consular Office Suites by Hilton Parsippany.
const set_Display_Name = splitData[2];// Outcome: Hilton Parsippany.
const set_Address1 = splitData[3];// Outcome: 909 Parsippany Blvd.
const set_Address2 = splitData[4];// Outcome: Address2.
const set_State = splitData[5];// Outcome: NJ.
const set_City = splitData[6];// Outcome: Parsippany.
const set_Zip = splitData[7];// Outcome: 07054.
const set_Phone = splitData[8];// Outcome: 07054.
sharp(' You have actually chosen $ {set_Tour_Location} ');.
console.log( set_Tour_Location_Record_Id);// Outcome: a1F1U000003VKSSUA4.
console.log( set_Tour_Location);// Outcome: Consular Office Suites by Hilton Parsippany.
console.log( set_Display_Name);// Outcome: Hilton Parsippany.
console.log( set_Address1);// Outcome: 909 Parsippany Blvd.
console.log( set_Address2);// Outcome:.
console.log( set_State);// Outcome: NJ.
console.log( set_City);// Outcome: Parsippany.
console.log( set_Zip);// Outcome: 07054.
console.log( set_Phone);// Outcome: 07054.
// established row shade.
highlight_row();.
feature highlight_row() {
var table = document.getElementById(" display-table");.
var rows = table.getElementsByTagName(" tr");.
for (var i = 0; i < < rows.length; i++) {
rows[i] addEventListener(" click", feature () {
// Reset designs for all rows.
for (var j = 0; j < < rows.length; j++) {
rows[j] style.backgroundColor="";.
rows[j] style.color="";.
}
// Establish designs for the clicked row.
this.style.backgroundColor="# 1e90ff";.
this.style.color="snow";.
} );.
}
}
}
feature calculateDistance() {
const address1 = document.getElementById(" address1"). worth;.
const geocoder = brand-new google.maps.Geocoder();.
geocoder.geocode( {address: address1}, feature (results1, status1) {
if (status1 === google.maps.GeocoderStatus.OK) {
const beginning = results1[0] geometry.location;.
const distanceService = brand-new google.maps.DistanceMatrixService();.
distanceService.getDistanceMatrix(.
{
beginnings: [origin],.
locations: Object.values( destinationAddresses). map(.
( location) => > getAddress( location).
),.
travelMode: google.maps.TravelMode.DRIVING,.
unitSystem: google.maps.UnitSystem.IMPERIAL,// Usage miles.
},.
feature (reaction, standing) {
if (standing === google.maps.DistanceMatrixStatus.OK) {
allow resultHtml="<< table id= display-table>>";.
resultHtml +=.
"<< tr><> < th>> Show Call< < th>> City< < th>> State< < th>> Zip< < th>> Range< < th>> Driving time< ";.
for (const type in destinationAddresses) {
if (destinationAddresses.hasOwnProperty( trick)) {
const location = destinationAddresses[key];.
const address = getAddress( location);.
const range =.
response.rows[0] aspects[
parseInt(key.split("destination")[1]) - 1.
] distance.text;.
const period =.
response.rows[0] aspects[
parseInt(key.split("destination")[1]) - 1.
] duration.text;.
resultHtml += '<< tr onclick=" SetTourLocationRecordId('$ {destination.Tour _ Location_Record_Id}, $ {destination.Tour _ Place}, $ {destination.Display _ Call}, $ {destination.Address1}, $ {destination.Address2}, $ {destination.State}, $ {destination.City}, $ {destination.Zip}, $ {destination.Phone} ');"><> < td> <> < period >>$ {destination.Display _ Call} < < td>>$ {destination.City} < < td>>$ {destination.State} < < td>>$ {destination.Zip} < < td>>$ {range} << td>>$ {period} < ';.
}
}
resultHtml += "<";.
if (resultHtml) {
document.getElementById(" outcome"). innerHTML = resultHtml;.
} else {
document.getElementById(" outcome"). innerHTML =.
" Incapable to compute range for all addresses.";.
}
} else {
document.getElementById(" outcome"). innerHTML =.
" Mistake computing range.";.
}
}
);.
} else {
document.getElementById(" outcome"). innerHTML =.
" Void beginning address.";.
}
} );.
}
<.
<.
<< body>>.
<< h1>> Range Estimation<.
<< tag for=" address1">> Beginning Address:<.
<< input kind=" message" id=" address1"/>>.
<< br/>>.
<< switch onclick=" calculateDistance()">> Determine Range<.
<< br/>>.
<< div id=" outcome"><> .
<.
