Capture GET Coordinates in the Google Maps api

Question

In this script I just need javascript to get the coordinates

   //Algo parecido....
   $lato = $_GET['lato'];
   $longo = $_GET['longo'];
   $lato = $_GET['latd'];
   $longd = $_GET['longd'];

  <script>
    var origem = {
  lat: -22.821124,  //trocar por uma variavel vindo pelo GET
  lng: -43.250771   //trocar por uma variavel vindo pelo GET
                 };
    var destino = {
  lat: -22.910492,  //trocar por uma variavel vindo pelo GET
  lng: -43.167901   //trocar por uma variavel vindo pelo GET
                 };

Complete script ------ This script is working perfectly on my system only I do not know why it does not work in the run of stackoverflow to show it working

var origem = {
  lat: -22.821124,
  lng: -43.250771
};
var destino = {
  lat: -22.910492,
  lng: -43.167901
};

var map;
var marker;

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-22.854189, -43.238239),
    zoom: 12,
    mapTypeId: 'roadmap'
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


  // Evento que detecta o click no mapa para criar o marcador
  google.maps.event.addListener(map, "click", function(event) {

    // O evento "click" retorna a posição do click no mapa,
    // através dos métodos latLng.lat() e latLng.lng().

    // Passamos as respectivas coordenadas para as variáveis lat e lng
    // para posterior referência.
    // Utilizamos o método toFixed(6) para limitar o número de casas decimais.
    // A API ignora os valores além da 6ª casa decimal
    var lat = event.latLng.lat().toFixed(6);
    var lng = event.latLng.lng().toFixed(6);

    // A criação do marcador é feita na função createMarker() e
    // passamos os valores das coordenadas do click através
    // dos parâmetros lat e lng.
    createMarker(lat, lng);




    // getCoords() actualiza os valores de Latitue e Longitude
    // das caixas de texto existentes no topo da página
    getCoords(lat, lng);

  });

  ///////////////////////////////inicio rota//////////////////////////////////////////////////   
  var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map
  });

  // Set destination, origin and travel mode.
  var request = {
    destination: destino,
    origin: origem,
    travelMode: google.maps.TravelMode.DRIVING
  };

  // Pass the directions request to the directions service.
  var directionsService = new google.maps.DirectionsService();
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      // Display the route on the map.
      directionsDisplay.setDirections(response);
    }
  });
  ///////////////////////////////fim rota//////////////////////////////////////////////////   

}
google.maps.event.addDomListener(window, 'load', initialize);

// Função que cria o marcador
function createMarker(lat, lng) {

  // A intenção é criar um único marcador, por isso
  // verificamos se já existe um marcador no mapa.
  // Assim cada vez que é feito um click no mapa
  // o anterior marcador é removido e é criado outro novo.

  // Se a variável marker contém algum valor
  if (marker) {
    // remover esse marcador do mapa
    marker.setMap(null);
    // remover qualquer valor da variável marker
    marker = "";
  }

  // definir a variável marker com os novos valores
  marker = new google.maps.Marker({

    // Define a posição do marcador através dos valores lat e lng
    // que foram definidos através do click no mapa
    position: new google.maps.LatLng(lat, lng),

    // Esta opção permite que o marcador possa ser arrastado
    // para um posicionamento com maior precisão.
    draggable: true,

    map: map
  });


  // Evento que detecta o arrastar do marcador para
  // redefinir as coordenadas lat e lng e
  // actualiza os valores das caixas de texto no topo da página
  google.maps.event.addListener(marker, 'dragend', function() {

    // Actualiza as coordenadas de posição do marcador no mapa
    marker.position = marker.getPosition();

    // Redefine as variáveis lat e lng para actualizar
    // os valores das caixas de texto no topo
    var lat = marker.position.lat().toFixed(6);
    var lng = marker.position.lng().toFixed(6);

    // Chamada da função que actualiza os valores das caixas de texto
    getCoords(lat, lng);

  });
}

// Função que actualiza as caixas de texto no topo da página
function getCoords(lat, lng) {

  // Referência ao elemento HTML (input) com o id 'lat'
  var coords_lat = document.getElementById('lat');

  // Actualiza o valor do input 'lat'
  coords_lat.value = lat;

  // Referência ao elemento HTML (input) com o id 'lng'
  var coords_lng = document.getElementById('lng');

  // Actualiza o valor do input 'lng'
  coords_lng.value = lng;


}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript" src="js/map.js"></script>
</head>

<body>
  <div class="coordenadas">

    <form action="getponto.php" method="GET">

      <label for="lat">Lat:</label>
      <input type="text" name="lat" id="lat" value="0" />
      <label for="lng">Lng:</label>
      <input type="text" name="lng" id="lng" value="0" />
      <input type="submit" name="sub" value="Verificar" />
    </form>
  </div>

  <div id="map-canvas" />
</body>

</html>

Answer 1

If you want to get these query string values , to fill both your controls and your variables, you can read it in location.search. Type:

var querystring = location.search;
var lato = querystring.split("lato=")[1];
lato = lato ? lato.split("&")[0] : 0; // atribui valor zero caso não tenha sido informado nada nesse campo.

var longo = querystring.split("longo=")[1];
longo = longo ? longo.split("&")[0] : 0;

This way you can read the values of both the GET request and your fields and use them in the rest of your code.