I am creating an app for a potential transportation company. Users can log in and submit an order for a transport(Basically a truck will show up at an address and transport the clients stuff to a destination).
I am trying to add google maps in an element where the user can type in the origin and destination of the order. I tried different ways, using the "Embed a map" function on the google maps site. I also tried via google cloud platform to create an API KEY, but I never get the map on my app to show the directions option.
Here's the HTML I've tried so far(this results in: google.com refused to connect):
<iframe src="https://www.google.com/maps/embed/v1/MODE?key=API_KEY" width="400" height="400"></iframe>
This one connects but just shows a map that doesn't have the find directions option:
<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>
So basically I need the user to be able to put in the origin and location for the trip,google maps calculates the distance, the user submits the distance when the form is submitted, which I need to calculate the price for the transport...
Let me know if it is not clear what I am struggling with