Insert how to get map button

Question

Insert how to get map button

Navigation

#1 by (0 votes)

0

I need to insert a button on my site so that clicking a route is established by taking the location of the customer to the address that will already be established on the site page.

Here is the page with the map and the location that the person may want to visit. link

Thank you!

google-maps

asked by anonymous 27.03.2017 / 20:27

1 answer

MultipleObjectsReturned How to pick up / drop object in localstorage?

score 0 · Answer 1

If you use HTML5 in your code, it's a pretty simple task that you need to execute.

First of all, you need to get the business location. It will be easily obtained through the following function:

function addEmpresaMarker(latitude, longitude, marcadorEmp) {
  var coords = new google.maps.LatLng(latitude, longitude);
  marcadorEmp = new google.maps.Marker {
    map: map,
    position: coords
  };
}

Next, you need to know the location of your user. There is an HTML5 function that lets you know the user's location (Use sparingly). Run it and add the coordinates to a new marker. Follow function below.

function findUserLocation(marcadorUsu) {
  // Mapa e opções do mapa já estão definidos previamente
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var posicao = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      console.log(posicao); // Confira se a localização está correta
      marcadorUsu = new google.maps.Marker {
        map: map,
        position: posicao
      };
    });
  } else {
    // Browser não suporta Geolocalização ou o usuário impediu o uso
    alert('Falha na tentativa de localização do usuário');
  }
}

Now, you need to calculate the route between the user and the company. For this, you will need the Google Maps API, which will calculate distance and show the route, obviously. Note that to calculate the route, it needs references from the source and destination markers. Notice the function well:

function mostrarCaminho (pointA, pointB) {
  // Aciona a Directions API
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
      map: mapa,
      suppressMarkers: true, // Não exibe os marcadores da rota, porque senão, pode confundir o usuário
  });
  directionsService.route({
    origin: pointA,
    destination: pointB,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) { // Se deu tudo certo
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Não foi possível exibir o trajeto devido ao seguinte erro: ' + status);
    }
  });
}

Now just join the commands that you created in a single function that will be executed when the 'How to get' button is clicked. The function should look something like this:

// AddEmpresaMarker()

var coordsEmp = new google.maps.LatLng(latitude, longitude);
marcadorEmp = new google.maps.Marker {
  map: map,
  position: coordsEmp
};

// FindUserLocation()
// Mapa e opções do mapa já estão definidos previamente

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var posicao = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };
    console.log(posicao); // Confira se a localização está correta
    marcadorUsu = new google.maps.Marker {
      map: map,
      position: posicao
    };
  });
} else {
  // Browser não suporta Geolocalização ou o usuário impediu o uso
  return alert('Falha na tentativa de localização do usuário'); // Esse return é pra finalizar a função. De nada adianta executar toda a função se você não tem uma das posições
}

// MostrarCaminho()
// Aciona a Directions API

var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
  map: mapa,
  suppressMarkers: true, // Não exibe os marcadores da rota, porque senão, pode confundir o usuário
});
directionsService.route({
  origin: pointA,
  destination: pointB,
  travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) { // Se deu tudo certo
    directionsDisplay.setDirections(response);
  } else {
    alert('Não foi possível exibir o trajeto devido ao seguinte erro: ' + status);
  }
});

There may be some syntax error in the middle, but it's pretty easy to fix. Any questions, please comment. I'll leave some links that can help you in this process:

Bookmarks: link

User location: link

Routes: link