Move Text+location to google maps app

Question

Hello, I am making an application using only: HTML, JS(Angularjs) and CSS. I have the following.

My location is picked up by the application and an address that is saved in the database, a string ex: São Paulo, Rua principal 78 - Centro.

I want to make a button (Start Route) for for example: I am in Osasco(would be my current location) and create the route to São Paulo, Main Street 78 - Center.

I’m using the following code to open the google maps app:

<div class="meuMapa"> 
<a onclick="javascript:window.open('geo: , ', '_system')> Iniciar Trajeto</a></div>

But I have no idea how to pass the parameters correctly, does anyone know how? In many sites I saw that passes the longitude and latitude, but in my case I do not have it, only the address that is a String. Or if there’s a better way to do this would also accept tips and links.

Answer 1

If you have the address, you can get the longitude and latitude coordinates by Geocoding, according to the documentation of API of Geocoding.

This example demonstrates the use of the JSON API:

https://maps.googleapis.com/maps/api/geocode/json?address=Avenida%20Paulista%201000,%20S%C3%A3o%20Paulo

This is the response to the request:

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "1000",
               "short_name" : "1000",
               "types" : [ "street_number" ]
            },
            {
               "long_name" : "Avenida Paulista",
               "short_name" : "Av. Paulista",
               "types" : [ "route" ]
            },
            {
               "long_name" : "Bela Vista",
               "short_name" : "Bela Vista",
               "types" : [ "political", "sublocality", "sublocality_level_1" ]
            },
            {
               "long_name" : "São Paulo",
               "short_name" : "São Paulo",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "São Paulo",
               "short_name" : "SP",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "Brasil",
               "short_name" : "BR",
               "types" : [ "country", "political" ]
            },
            {
               "long_name" : "01310-100",
               "short_name" : "01310-100",
               "types" : [ "postal_code" ]
            }
         ],
         "formatted_address" : "Av. Paulista, 1000 - Bela Vista, São Paulo - SP, 01310-100, Brasil",
         "geometry" : {
            "location" : {
               "lat" : -23.5647577,
               "lng" : -46.6518495
            },
            "location_type" : "ROOFTOP",
            "viewport" : {
               "northeast" : {
                  "lat" : -23.56340871970849,
                  "lng" : -46.65050051970849
               },
               "southwest" : {
                  "lat" : -23.5661066802915,
                  "lng" : -46.65319848029149
               }
            }
         },
         "place_id" : "ChIJfwcg7cdZzpQR-FIlwhOEYxI",
         "types" : [ "street_address" ]
      }
   ],
   "status" : "OK"
}

The specific section below lists the latitude and longitude coordinates for the address the type ROOFTOP indicates that the returned result is a precise geographic code for which there is location information with address accuracy. These are the values that must be passed.

     "geometry" : {
        "location" : {
           "lat" : -23.5647577,
           "lng" : -46.6518495
        },
        "location_type" : "ROOFTOP",