Javascriptで前半に定義した変数を後半のfunction内に代入したい

Question

###前提・実現したいこと
前半のlatitudeとlongitudeで定義した緯度経度を、
後半のmap.panTo内の●●●●に代入したいと考えています。

方法をお教えいただければ幸いです。

###問題
panToを使うと良さそうだというところまでは分かりましたが、
panToでlatlngを呼び出そうとすると動作せず、困っています。

なお、以下のように緯度経度を直接打ち込むと正しく動作します。
map.panTo(new google.maps.LatLng(35.681304, 139.766052));

また、HTMLのonclickを"onDeviceReady()"にしてしまうことで、
マップをリロードさせて現在地に戻すという方法も考えましたが、
この方法あまり良い方法ではないような気がします。

不勉強で申し訳ありませんが、実現方法をご教授ください。

###ソースコード
▼HTML

<div id="map_canvas"></div>
<div onclick="toMarker()"></div>

▼Javascript

<script>
	var map = null; // 地図オブジェクト
	$(function(){
		$(document).on('deviceready', onDeviceReady);
	});

	function onDeviceReady() {
		// GPS センサーにアクセスして現在位置情報を取得する
		navigator.geolocation.getCurrentPosition(onSuccess, onError);
	}

	// 現在地の取得に成功した場合に呼び出される関数
	function onSuccess(position){
		// position に含まれる緯度経度情報を取得
		var latitude = position.coords.latitude;
		var longitude = position.coords.longitude;
		console.log('緯度: ' + latitude);
		console.log('経度: ' + longitude);

		// 緯度経度情報を元にLatLngオブジェクトを作成
		var latlng = new google.maps.LatLng(latitude, longitude);
		createMap(latlng);
	}

	// 現在地の取得に失敗した場合に呼び出される関数
	function onError(error){
		alert(error.message);
	}

	// 地図を作成する関数
	function createMap(latlng) {
		// 地図のオプション
		var mapOption = {
			zoom: 14, // ズームレベル
			center: latlng, // 現在の緯度経度を地図のセンターにする
			mapTypeId: google.maps.MapTypeId.ROADMAP, // 地図のタイプ
		};

		// Mapオブジェクトを作成
		map = new google.maps.Map($('#map_canvas').get(0), mapOption);

		// 現在地マーカーの作成
		var marker = new google.maps.Marker({ position: latlng, map: map });
	}

	// 現在地へ戻る
	function toMarker() {
		map.panTo(new google.maps.LatLng(●●●●));
	}
</script>

###補足情報
・Monacaを利用
・公式サンプル（https://ja.monaca.io/book/support/）の8-1地図アプリをカスタマイズ

Answer 1

プログラムを動作するように修正するのは、そこは、ご本人様にがんばって頂くとして、

うまく動作しない、なぜ？のヒントのみ記載させていただきます。

まず、おそらく、代入したいという、latitudeとlongitudeは、

    function onSuccess(position){
        // position に含まれる緯度経度情報を取得
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;

ここで、記載されている変数のことかと思います。

この、変数

var latitude = position.coords.latitude;
var longitude = position.coords.longitude;

は、

function onSuccess()

という関数の、中で定義されていますので、この関数の中でのみ使える変数です。
希望は、たぶん、

map.panTo(new google.maps.LatLng(latitude, longitude));

と書きたいのかと思いますが、さきほどと重複しますが、latitudeとlongitudeは、onSuccess関数内でのみ利用できるように定義されているので、上記コードは、実行できません。
どの言語にも関連する、プログラミングの基本概念ですので、

「変数 スコープ」

などの、キーワードで、ぜひこの辺りは、きちんと学ばれるとよいかと思います。
そして、自ら納得して、動作するように修正されるのが、よろしいかと。

Comments

[Motsu]

アドバイスありがとうございます。
やはりそのfunctionで定義した関数内でしか動作しないわけですね。

となると、function toMarker() として再度関数を定義して、
その中で latitude, longitude を定義し、使っていくことになると思いますが、
この場合、何度やってもエラーが出てしまっていました。

例えば以下の形では、<div onclick="toMarker()">をクリックした際に
画面が真っ白になってしまいます。

```
function toMarker() {
navigator.geolocation.getCurrentPosition(pos);
}

function pos(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
map.panTo(new google.maps.LatLng(latitude + ', ' + longitude));
}
```

function pos(position) に map.panTo を含めるあたりに
エラーの元があるのかなと思いますが、ここから先に進めず、
そもそも function onSuccess 内で動かせないかなと考え直しています。

初歩的な質問で申し訳ありませんが、どこでエラーが起きているのか
ヒントをいただければ幸いです。