Problema al pasar varios parámetros a una funciona

[jc1992]

Buenas noches ! Me estoy peleando con la api de google maps v3 y obtengo la latitud y la longitud

Una parte la obtengo de la siguiente manera

Código Javascript:

function showPosition(position) {
    x.innerHTML = "<div id='lat1'>Latitude:</div> " + position.coords.latitude + 
    "<div id='long1'><br>Longitude:</div> " + position.coords.longitude;    
}
 

Y esto me lo hace correctamente luego tengo un foreach con PHP que me carga correctamente las latitutes y las longitudes de otros sitios.

Código PHP:

@foreach ($municipios as $user)
    <p>{{ $user->municipio }}</p>
        <p><div id="lat2">Latitud:{{ $user->latitud }}</div></p>
    <p><div id="long2">Longitud:{{ $user->longitud }}</div></p>
    <a onclick="calculardospuntos(this)">Calcular distancia entre dos puntos</a>
@endforeach
 

El problema está en que quiero pasar los cuatro resultados a la función calculardospuntos() y mostrar en un mensaje de alerta su valor y yo a partir de ahi seguir investigando.

He probado con el getElementById pero me da un resultado de null

Código Javascript:

function calculardospuntos(id){
  var lat1=document.getElementById(id);
  var long1=document.getElementById("long1");
  var lat2=document.getElementById("lat2");
  var long2=document.getElementById("long2");
  alert(lat1);
  alert(long1);
  alert(lat2);
  alert(long2);
 
}