object HTMLSpanElementからの取り出し方

前提

現在地から目的地まで、GoogleMapのAPIを使用して経路を検索するサイトを作っています。

実現したいこと

JavaScriptで取得した現在地情報をPythonに送りたいです。

発生している問題・エラーメッセージ

送った内容が「object HTMLSpanElement」になってしまいます。

該当のソースコード

HTML

<div class="center"> <div class="btn-margin mb-3"> <button id="btn" class="btn"> 現在位置を取得する </button> </div> <div class="txt-margin"> <p>緯度：<span id="latitude">???</span><span>度</span></p> <p>経度：<span id="longitude">???</span><span>度</span></p> </div> </div> <script src="/static/js/geo.js"></script>

JavaScript

// ボタンを押した時の処理document.getElementById("btn").onclick = function(){ // 位置情報を取得する navigator.geolocation.getCurrentPosition(successCallback, errorCallback); send (latitude, longitude);}; // 取得に成功した場合の処理function successCallback(position){ // 緯度を取得し画面に表示 var latitude = position.coords.latitude; document.getElementById("latitude").innerHTML = latitude; // 経度を取得し画面に表示 var longitude = position.coords.longitude; document.getElementById("longitude").innerHTML = longitude;}; // 取得に失敗した場合の処理function errorCallback(error){ alert("位置情報が取得できませんでした");}; // APIに緯度と経度を送るfunction send (latitude, longitude){ // FormDataオブジェクトの初期化 const fd = new FormData(); // FormDataオブジェクトにデータをセット fd.append('lat', latitude); fd.append('long', longitude); $.ajax({ url: '/gps', type: 'POST', data: fd , contentType: false, processData: false, success: function(data, dataType) { //非同期で通信成功時に読み出される [200 OK 時] console.log('Success', data); }, error: function(XMLHttpRequest, textStatus, errorThrown) { //非同期で通信失敗時に読み出される console.log('Error : ' + errorThrown); }});}

Python

@app.route("/gps", methods=["GET","POST"])def gps(): if request.method == "POST": lat = request.form['lat'] long = request.form['long'] print("緯度",lat) print("経度",long) return render_template("gps.html") else: return render_template("gps.html")

試したこと

successCallbackの最後でconsole.log(latitude)、console.log(longitude)を試してみましたが表示されませんでした。

補足情報（FW/ツールのバージョンなど）

画面に表示はされるので緯度と経度の取得はできているはずです。
Pythonのprintはデバッグが終わったら削除します。
以下のサイトを参考にしました。