so basically I’m trying to have a addresses point a to point b and generate a map showing the route and then generate millage so I can generate a price quote as I’m a taxi driver please see coding any help would be appreciated
ps all keys have been removed this time
the code for the page
import { get_routes } from ‘backend/new-module.web.js’
$w.onReady(function () {
});
$w(‘#find’).onClick((event) => {
})
export function onclick(event) {
$w(‘#find’).onClick((event) => {
})
let obj = {
"origin": {
"location": {
"latLng": {
"latitude": $w("#addressInput1").value.location.latitude,
"longitude": $w("#addressInput1").value.location.longitude
}
}
},
"destination": {
"location": {
"latLng": {
"latitude": $w("#addressInput2").value.location.latitude,
"longitude": $w("#addressInput2").value.location.longitude
}
}
},
"travelmode": "DRIVE",
"routingPreference": "TRAFFIC_AWARE",
"computeAlternativeRoutes": false,
"routeModifiers": {
"avoidTolls": false,
"avoidHighways": false,
"avoidFerries": false
},
"languageCode": "en-US",
"units": "IMPERIAL"
};
get_routes(obj) }
((res) => {
let polyline = res.routes[0].polyline.encodedpolyline;
let time = res.routes[0].duration;
let markers = [{
"lat": $w("#addressInput1").value.location.latitude,
"lng": $w("#addressInput1").value.location.latitude
}, {
"lat": $w("#addressInput2").value.location.latitude,
"lng": $w("#addressInput2").value.location.latitude
}];
$w('#html1').postMessage({ markers, polyline, time })
});
the code for the JS module
import { Permissions, webMethod } from “wix-web-module”;
import { fetch } from ‘wix-fetch’;
const key = “xxxxxxxxxxxxxxxxxxxxxx”;
export function get_routes(obj) {
}
export const multiply = get_routes()
Permissions.Anyone,
async () =>{
}
fetch(“https://routes.googleapis.com/directions/v2:computeRoutes”,{
“method”: “post”,
“headers”: {
“content-Type”: “application/json”,
“X-Goog-FieldMask”: “routes.duration,routes.distanceMeters,routes.polyline.encodedPolyline” ,
“X-Goog-Api-Key”: key
},
‘body’: JSON.stringify()
})
.then((httpResponse) => {
return httpResponse.json();
})
.then((JSON) => {
return JSON;
})
.catch((err) => {
return err;
});
the code for the html to generate the map but don’t work
#map { height: 100%; } html, body { height: 100% margin: 0; padding: 0; } let locations;
function init() {
window.onmessage = (event) => {
//set markers
locations = event.data.markers;
let time = event.data.time;
let infowindow = new google.maps.Infowindow();
let map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
centre: {}
});
var icon = "https://static.wixstatic.com/media/33aa21_5ce6739f67c84c3a97c8594de868a3ef~mv2.png";
var markers = locations.map(function (location) {
let marker = new google.map.marker({
position: location,
icon: icon,
map: map
});
});
let bounds = new google.maps.LatLngBounds();
event.data.markers.forEach(m => {
bounds.extend(m);
});
map.fitBounds(bounds);
//Translate polyline
var decodedpath = google.maps.geometry.ecoding.decodepath(event.data.polyline);
var route_path = new google.maps.polyline({
path: decodedpath,
strokeColor: "4285F4",
strokeOpacity: 1.0,
strokeWeight: 6,
map: map
});
google.maps.event.addListener(route_path, 'click', function(event) {
for (var i = 0; i <this.getPath().getLenth() - 1; i++) {
var segmentPolyline = new google.maps.polyline({
path: [this.getPath().getAt(i), this.getPath().getAt(i + 1)]
});
if(google.maps.geometry.poly.isLocationonEdge(event.latLng, segmentPolyline, 10e-3)) {
var content = "Travel time: " + time;
infowindow.setContent(content);
infowindow.setPosition(event.latLng);
infowindow.open(map);
}
}
});
function decodeLevels(encodeedLevelsString) {
var decodedLevels = [];
for (var i = 0; i < encodedLevelsString.lengh; ++i) {
var level = encodedLevelsString.chardCodeAt(i) - 63;
decodedLevels.push(level);
}
return decodeLevels;
}
}
}
</Script>
<script scr="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer.js"></script>
<script scr="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxx&v=weekly&libraries=geometry&sensor=false&callback=init" defer></script>"
</body>
</html>