Redirect users to Google Maps app using Waypoints

Asked

Viewed 910 times

-2

I’m building a website (html/php/javascript/css) with integration with google maps using the Javascript API.

function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: cidade
    });

    directionsDisplay.setMap(map);
    //Painel texto
    calculateAndDisplayRoute(directionsService, directionsDisplay);
    directionsDisplay.setPanel(document.getElementById('right-panel'));
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  directionsService.route({
    origin: document.getElementById('endOrigem').value,
    destination: document.getElementById('endDest').value,
    waypoints: waypoints,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('ERRO!!');
    }
  });
}

So far everything is working perfectly. The route opens in a div on the site itself.

What I need is, when accessing the site with Android/iOS this Route is open in the user’s Maps, or at least ask the user if he wants to open in brownser or Maps.

I do not know how to pass these parameters (origin, destination and waypoints) at the url?!

javascript android google-maps

2 answers

0

There are two ways you can do this.

Geo

You can use the Android geo API for this by passing the address or coordinates. An example of use would be like this:

 <p><a href="google.navigation:q=San+Francisco">Navigation to San Francisco</a></p>
 <p><a href="google.navigation:q=50,10">Navigation to 50/10</a></p>

See the official documentation

Open google maps address with search

You can pass the link with the search address, so Android will suggest to use a map application, like Google Maps.

http://maps.google.com/maps?saddr=street+adress&daddr=street+address

Examples of uses

<!DOCTYPE html>
<html>
    <head>
        <title>Geo Link Test</title>
    </head>
    <body>
        <p><a href="geo:50,10">Location 50/10</a></p>
        <p><a href="geo:Vienna">Location Vienna</a></p>
        <p><a href="geo:?z=5&q=New+York">Zoom 5, Search for New York</a></p>
        <p><a href="geo:?q=San+Francisco&z=15">Zoom 15, Search for San Francisco</a></p>
        <p><a href="google.navigation:q=San+Francisco">Navigation to San Francisco</a></p>
        <p><a href="google.navigation:q=50,10">Navigation to 50/10</a></p>
        <p><a href="http://maps.google.com/maps?saddr=New+York&daddr=San+Francisco">Route New York --> San Francisco</a></p>
        <p><a href="http://maps.google.com/maps?saddr=50,10&daddr=50,20">Route 50/10 --> 50/20</a></p>
    </body>
</html>

There are some things that will not work as expected, as you are not using it natively, but this is the best way to do what you want without using any other language/framework.

For more details, see this answer

0

You must do via Intent

example:

Intent intent = new Intent(android.content.Intent.ACTION_VIEW, 
Uri.parse("https://maps.google.ch/maps?saddr=[address1]&daddr=[address2] to:[address3] to: [address4]"));
startActivity(intent);

Exchange [address#] with waypoints

  • Leonardo, this on android neh? But and to redirect via html or java, have how? from the browser call google maps..

Browser other questions tagged javascript android google-maps

You are not signed in. Login or sign up in order to post.