In search of assistance with implementing Google Maps navigation into an Ionic 2 application

Incorporating external Google Maps navigation with ride distance and time is my goal. I am utilizing a method from phonegap-launch-navigator to achieve this. Here is the code for the method:

navigate()
{
    let options: LaunchNavigatorOptions = {
      start: this.start
    };
    LaunchNavigator.navigate(this.destination, options)
        .then(
            success => alert('Launched navigator'),
            error => alert('Error launching navigator: ' + error)
    );
  }

In addition, my submit method looks like this:

 submit() {
    let that = this;
    this.map.getCameraPosition().then(res => {
      let callback = that.navParams.get("callback")
      callback(res.target).then(() => {
        this._navController.pop();
      });
    })
  }

The submit method returns a latlng value.

I have a navigate button on the UI that triggers this method. However, I am uncertain about how to obtain latlng values from the Google Maps API and pass them into the navigate method. Any guidance on this matter would be greatly appreciated. Thank you!

Answer №1

Here's a suggested approach:

let latitude = "1.39";
let longitude = "103.84";

let latlng = new google.maps.LatLng(latitude, longitude);   
let coordinates = String(latlng);                      //(1.39, 103.84)
let result = coordinates.substring(1, coordinates.length-1); //1.39, 103.84
result = result.replace(/ /g,'');                //1.39,103.84
let list = result.split(",");                    //["1.39","103.84"]

let latNavigation = list[0];
let lngNavigation = list[1];

navigate(){
  LaunchNavigator.navigate([latNavigation, lngNavigation], options)
        .then(
            success => alert('Navigator launched successfully'),
            error => alert('Error launching navigator: ' + error)
    );
}

If I misunderstood how your submit() is connected to navigate(), please clarify.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering an unexpected closing tag "a" while using Angular 2 with webpack

I am currently working with an Angular 2 template that displays tabs on my website: <div id="menu"> <ul id="tabs"> <li *ngFor="let tab of tabs; let i = index" [class.active]="selectedTab===i"> <a routerLink="/p ...

There seems to be an issue with the 'clr-icon' element; it is not recognized as a valid element

When I run this specific command: ng build --prod --base-href ./ An error message is displayed: ERROR in : 'clr-icon' is not a known element: 1. If 'clr-icon' is an Angular component, then verify that it is part of this module. 2. If ...

Iterate through the complex array of nested objects and modify the values according to specified conditions

I am currently iterating through an array of objects and then delving into a deeply nested array of objects to search for a specific ID. Once the ID is found, I need to update the status to a particular value and return the entire updated array. Issue: Th ...

The password field value in an Angular form is not defined

After making some modifications to a sign-in template that worked perfectly before, I encountered an error when trying to submit the signup form. The error message reads as follows: ERROR TypeError: Cannot read property 'value' of undefined Here ...

What is the best way to implement bypassSecurityTrustResourceUrl for all elements within an array?

My challenge is dealing with an array of Google Map Embed API URLs. As I iterate over each item, I need to bind them to the source of an iFrame. I have a solution in mind: constructor(private sanitizer: DomSanitizationService) { this.url = sanitizer. ...

What is the best way to tally up the occurrences of a specific class within an Angular application?

After reviewing the resources provided below on impure and pure pipes in Angular applications: What is impure pipe in Angular? I have been curious about inspecting the instances created by an Angular application firsthand, although I am uncertain if thi ...

Attempting to render the application results in an error message stating: "Actions must be plain objects. Custom middleware should be used for asynchronous actions."

I am experiencing an issue while testing my vite + typescript + redux application to render the App component using vitest for testing. I am utilizing redux@toolkit and encountering a problem when trying to implement async thunk in the app component: Error ...

Designing the File and Folder Organization for Next.js Frontend and AWS Cloud Development Kit (CDK) Backend

When it comes to creating websites with serverless backends, I've been thinking about the best practices for folder structure. Currently, my setup includes a Next.js frontend and an AWS CDK backend. The way I've structured the folders has the bac ...

The process of extracting values from an HTML tag using Angular interpolation

I am working on an Angular application that has the following code structure: <p>{{item.content}}</p> The content displayed includes text mixed with an <a> tag containing various attributes like this: <p>You can find the content ...

How to reset an Angular 7 reactive form to its initial values instead of clearing them completely

Is there a way to restore a reactive form group back to its original values without completely clearing it using .reset()? In this StackBlitz example, the default selected value is Parent. If a user changes it to "sister" and wants to revert the form to i ...

Creating a list in an Angular class: A step-by-step guide

In my Angular class, I have set up the username and password fields. Now, I want to include a list of roles as well. How can I go about adding this list of roles? export class User { userid: number; username: string; password: string; ro ...

When using Remix v2.8.1, the function useRouteLoaderData can return undefined if an error boundary is present in the root.tsx file

In my project, I have a loader in the root.tsx file and a component called 'Nav' which utilizes the loader data using the useRouteLoaderData hook. For instance, const data = useRouteLoaderData('root') as needed. <body> < ...

Highlighting Navbar Items

Can anyone provide advice on how to highlight a navbar item when clicked? I'm unsure if I should use Angular or CSS for this. Any guidance would be greatly appreciated. <div class="collapse navbar-collapse" id="navbarNav"> <ul class ...

Is it possible to style text dynamically with angular based on specific values?

I need to update the text and apply a different color based on the value. I have the following function that returns the text, but I also need to assign a color to each text. getState(data) { switch (data) { case 1: return '<li ...

`Angular 10 project fails to include JWT refresh token in cross-origin requests`

Our development setup includes an Angular front end and a web service running on a different port on the same machine. The web service is configured to allow access from localhost and the port hosting the Angular application. We are utilizing JWT authenti ...

Encountering an error stating "Argument of type 'X' is not assignable to parameter of type 'X' in the NextApiResponse within NextJS."

Here is the code snippet I am working with: type Data = { id: string; name: string; description: string; price: number; }; const FetchMeals = async (req: NextApiRequest, res: NextApiResponse<Data>) => { const response = await fetch( ...

Experience the power of React TypeScript where functions are passed as props, but access is restricted

Currently, I am working on creating a toggle button using react and typescript. In order to challenge myself, I have decided to pass a function as a prop to a child component to implement a complex feature. From what I remember, utilizing 'this.props& ...

Embedding a TypeScript React component within another one

Currently, I'm facing an issue with nesting a TypeScript React component within another one, as it's causing type errors. The problem seems to be that all props need to be added to the parent interface? Is there a way to handle this situation wi ...

Ace Code Editor: Turn off highlighted line beneath cursor

I am currently utilizing the Ace editor and would like to remove the shadowed line where the cursor is located. Here's an example Even after experimenting with different themes provided by Ace Mode Creator, the shadowed line still persists. Any sug ...

Angular 2 - Creating Your Own Validation Rules

Could someone please clarify the TypeScript syntax shown below for me? {[s: string]: boolean} This is the return type for a ValidatorFn in Angular 2. What exactly does the array: [s: string] represent? When creating my own custom ValidatorFn function, w ...