How do I make a dynamic "Get Directions" button component using google maps

Question

I'm creating a "Get Direction" button component.

interface PropsType {
  coordinates: {
    lat: number;
    lng: number;
  } | null;
}

 type LocationAdress = {
  city: string
  name: string
  state: string
  address: string | null
}

export default function GetDirectionButton(props: PropsType, address: LocationAddress) {
  return (
    <Button
      variant="contained"
      href="(HOW DO I DO THIS PART)"
      target="_blank"
    >
      Get Direction
    </Button>
  );
}

Given the business name, address, and coordinates of a location, I want to be able to populate a link that opens up a new page to a new google maps that has that set as the endpoint.

If given the following set of address and coordinates:

• name: Nellis Auction
• address: 7440 Dean Martin Dr Suite 204
• coordinates: { lat: 36.0544499, lng: -115:1816101 }

I want the button to open up a new page and populate this new google maps direction page.

Get Direction

Is there a google cloud platform api that would help me do this? Is there any way for me to just mutate the google maps url to populate this same google maps query?

This component is meant to be dynamic so it has to take in different addresses/locations for the different branches of our store.

Thanks everyone!

EDIT:

This is what I was looking for.

Side note: In the case that I find a solution to my own question, is it better to delete the post or to keep it on and highlight the solution?