How to show Google Maps Navigation with .NET MAUI Blazor Hybrid

Question

I'm currently implementing a logistics app and I integrated Google Maps there. Now I need to show the Google Map Navigation within the app.

I have added a new page called Navigation.razor and using it as a child component within the main component.

At the moment, the map is only showing the path between the given two positions. How can I modify it to show the navigation?

<div class="card my-card">
    <div id="map2" style="width: 100%; height: 200px"></div>
</div>

<script>
    window.initNavigation = function (origin, destination) {
        map = new google.maps.Map(document.getElementById("map2"), {
            zoom: 11,
            center: { lat: origin.Latitude, lng: origin.Longtitude },
            disableDefaultUI: true,
            zoomControl: false,
            mapTypeControl: false,
            streetViewControl: false
        });

        const directionsService = new google.maps.DirectionsService();
        const directionsRenderer = new google.maps.DirectionsRenderer({
            map: map,
            suppressMarkers: false, // Set to true if you want to customize markers
            panel: document.getElementById("directions-panel")
        });

        const request = {
            origin: origin,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING
        };

        directionsService.route(request, function (result, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                directionsRenderer.setDirections(result);
                showNavigationSteps(result);
            } else {
                console.error("Directions request failed due to " + status);
            }
        });
    }

    function showNavigationSteps(directionResult) {
        const steps = directionResult.routes[0].legs[0].steps;
        const directionsPanel = document.getElementById("directions-panel");
        directionsPanel.innerHTML = ""; // Clear any previous steps

        steps.forEach((step, index) => {
            const instructionElement = document.createElement("p");
            instructionElement.innerHTML = `${index + 1}. ${step.instructions}`;
            directionsPanel.appendChild(instructionElement);
        });
    }
</script>

@code {
    @inject NavigationManager navigation
    @inject LocationService locationService
    @inject IJSRuntime JS

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            try
            {
                await RequestLocationPermissionAndInitializeMap();
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
        }
    }

    private async Task RequestLocationPermissionAndInitializeMap()
    {
        var status = await Permissions.RequestAsync<Permissions.LocationWhenInUse>();
        if (status == PermissionStatus.Granted)
        {
            var (location, locationFetchingError) = await locationService.GetCurrentLocationAsync();
            string origin = $"{location.Latitude},{location.Longitude}";
            // Pass the destination address to JavaScript if permission is granted
            string targetAddress = "59.337017307552195, 18.05017354381474";
            await JS.InvokeVoidAsync("initNavigation", origin, targetAddress);
        }
        else
        {
            // Handle permission denied scenario
            Console.WriteLine("Location permission denied");
        }
    }
}

Answer 1

Is there a way to display the turn-by-turn navigation somehow?

There are several ways you can try.

1.If you want to implement the navigation completely in your app, you can use a combination of the Google Maps API and the Google Directions API.

the Google Maps API: the Google Maps API.

the Directions API: Directions API

2.send the latitude and longitude of the location you want to navigate to the devices Maps app. Then it will open the device's Maps app and plot the location. The user can use the app to do whatever they want.