Html 添加用户可以在我的应用程序中键入方向的谷歌地图

我正在为一家潜在的运输公司创建一个应用程序。 用户可以登录并提交运输订单（基本上，卡车会出现在某个地址，并将客户的物品运输到目的地）

我试图在一个元素中添加谷歌地图，用户可以在其中键入订单的来源和目的地。 我尝试了不同的方法，使用谷歌地图网站上的“嵌入地图”功能。 我还尝试通过谷歌云平台创建API密钥，但我从未在我的应用程序上获得地图来显示方向选项

以下是我迄今为止尝试过的HTML（结果是：google.com拒绝连接）：

这一个连接但只显示一个没有“查找方向”选项的地图：

    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12087.739734878001!2d-74.25314605000001!3d40.7634558!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1601141814829!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

因此，基本上我需要用户能够输入行程的起点和位置，谷歌地图计算距离，用户在提交表单时提交距离，我需要计算交通的价格

---

如果不清楚我在做什么，请告诉我

您是否阅读了Directions API的文档，“一种使用HTTP请求计算位置间方向的服务”？这是一个web应用程序吗？你看过谷歌地图Javascript API了吗？您可能还希望使用Places Autocomplete，为您的应用程序提供一个搜索框，提供位置建议：

    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12087.739734878001!2d-74.25314605000001!3d40.7634558!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1601141814829!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>