How to load google maps api with a route to an address?

Question

I installed the Maps Api, but I don’t know how to get a result, that would load the map with the best route between two addresses, I’m using javascript and html.

Answer 1

add this code to your html:

<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/directions
?key=SUA_API_KEY_AQUI&origin=endereco+de+origem&destination=endereco+do+destino&mode=driving" allowfullscreen></iframe>

The following URL parameters are required:

origin: sets the starting point from which to display the route. The value can be the name of a place, an address, or a location ID. The string must escape from URL. This means that addresses such as "City Hall, New York, NY" (City Hall, New York, NY) should be converted to City+Hall, New+York, NY. (Google Maps Embed API allows + and %20 for space escape.) Site Ids should be preceded by place_id:. Destination defines the route arrival point.

The following URL parameters are optional:

waypoints: specifies one or more intermediate locations to provide route guidance between origin and destination. It is possible to specify several reference points using the vertical bar character (|) to separate seats (for example: Berlin,Germany|Paris,France). You can specify up to 20 reference points. Each reference point can be the name of a place, an address or a location ID.

mode: defines the mode of transport. The options are Driving, Walking (which gives preference to pedestrian paths and sidewalks, when available), bicycling (which generates routes by bike paths and preferred streets, when available), Transit or Flying. If no mode is specified, the Google Maps Embed API will display one or more of the most relevant modes for the specified route.

avoid: instructs Google Maps to avoid tolls, ferries and/or Highways. Separate values with the vertical bar character (for example: avoid=tolls|Highways). Note that this action does not exclude routes that include restricted components; it simply directs the result to more favorable routes.

Units: specifies Metric or imperial units when displaying distances in the results. If Units are not specified, the country of origin of the query will determine the used units.

You can use javascript to dynamically change the value of "origin" and "Destination" ;)

source: https://developers.google.com/maps/documentation/embed/guide?hl=pt-br#optional_parameters