# Can't get the route button to work and generate a route planner

**URL:** <https://forum.wixstudio.com/t/cant-get-the-route-button-to-work-and-generate-a-route-planner/69166>\
**Category:** Ask the community\
**Tags:** partners, technical-talk, question, code, wix-members-area\
**Created:** [February 26, 2025, 6:20pm UTC](https://forum.wixstudio.com/t/cant-get-the-route-button-to-work-and-generate-a-route-planner/69166 "2025-02-26T18:20:03Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![user5249](https://avatars.discourse-cdn.com/v4/letter/u/eada6e/32.png) [@user5249](https://forum.wixstudio.com/u/user5249)\
**Post date:** [February 26, 2025, 6:20pm UTC](https://forum.wixstudio.com/t/cant-get-the-route-button-to-work-and-generate-a-route-planner/69166/1 "2025-02-26T18:20:03Z")

</div>

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](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>

```