提示サンプル例：Animating Symbols|Google Maps JavaScript API|Google Developers

GoogleMapsAPIを利用していてコールバック関数や、
インターバル、タイムアウトなどの処理が必要な場合に、
サンプルソースで出てくる無名関数でパラメータ(引数)を、
渡す必要がある処理を導入する際の参考として記述の例をご紹介します。
本投稿ではサンプルソースをそのまま実行する例でご紹介します。

概要

1 提示サンプル例：Animating Symbols
2 別関数で無名関数を分割

提示サンプル例：Animating Symbols

「Animating Symbols」はポリライン上にシンボル(SVG)を描画し、
そのシンボルをポリラインに沿ってアニメーション表現をする際の処理です。

公式には以下で例示されているソースになります。

（出典）Animating Symbols | Google Maps JavaScript API | Google Developers

動作はサンプルソースそのままになりますので、
以下の通り、全く同じ動作をしています。

この処理の抜粋ですが、
以下のように「window.setInterval(function() {．．．}, 20);」と
無名関数内でインターバル処理を記述しています。

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}

// Use the DOM setInterval() function to change the offset of the symbol

// at fixed intervals.

function animateCircle(line) {

var count = 0;

window.setInterval(function() {

count = (count + 1) % 200;

var icons = line.get('icons');

icons[0].offset = (count / 2) + '%';

line.set('icons', icons);

}, 20);

}

（引用）Animating Symbols | Google Maps JavaScript API | Google Developers

上記の無名関数の定義では、
window.setInterval()の第一引数に無名関数を渡し、
11行目で無名関数の終了＝第一パラメータの終了。
その後、第二パラメータのインターバル値(20)を渡しています。

私は個人的にこの記述がどうも苦手なのです。
また「};)」なんかの閉じがズレていたりと編集がしにくかったりします。

上記のサンプルは以下で表示しています。

<script type="text/javascript">

function initMap() {
	  var map = new google.maps.Map(document.getElementById('map1'), {
	    center: {lat: 20.291, lng: 153.027},
	    zoom: 6,
	    mapTypeId: google.maps.MapTypeId.TERRAIN
	  });

	  // Define the symbol, using one of the predefined paths ('CIRCLE')
	  // supplied by the Google Maps JavaScript API.
	  var lineSymbol = {
	    path: google.maps.SymbolPath.CIRCLE,
	    scale: 8,
	    strokeColor: '#393'
	  };

	  // Create the polyline and add the symbol to it via the 'icons' property.
	  var line = new google.maps.Polyline({
	    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
	    icons: [{
	      icon: lineSymbol,
	      offset: '100%'
	    }],
	    map: map
	  });

	  animateCircle(line);
}

	// Use the DOM setInterval() function to change the offset of the symbol
	// at fixed intervals.
	function animateCircle(line) {
		var count = 0;
		window.setInterval(function() {
		count = (count + 1) % 200;

		var icons = line.get('icons');
		icons[0].offset = (count / 2) + '%';
		line.set('icons', icons);
		}, 20);
	}
google.maps.event.addDomListener(window,"load",initMap);
$('#ver').text(google.maps.version);
</script>

function initMap() {

var map = new google.maps.Map(document.getElementById('map1'), {

center: {lat: 20.291, lng: 153.027},

zoom: 6,

mapTypeId: google.maps.MapTypeId.TERRAIN

});

// Define the symbol, using one of the predefined paths ('CIRCLE')

// supplied by the Google Maps JavaScript API.

var lineSymbol = {

path: google.maps.SymbolPath.CIRCLE,

scale: 8,

strokeColor: '#393'

};

// Create the polyline and add the symbol to it via the 'icons' property.

var line = new google.maps.Polyline({

path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],

icons: [{

icon: lineSymbol,

offset: '100%'

}],

map: map

});

animateCircle(line);

}

// Use the DOM setInterval() function to change the offset of the symbol

// at fixed intervals.

function animateCircle(line) {

var count = 0;

window.setInterval(function() {

count = (count + 1) % 200;

var icons = line.get('icons');

icons[0].offset = (count / 2) + '%';

line.set('icons', icons);

}, 20);

}

google.maps.event.addDomListener(window,"load",initMap);

$('#ver').text(google.maps.version);

</script>

個人的には無名関数の中に処理を書き、
さらに第二パラメータがあるような場合が実に苦手なんです。

ちょっと変更しただけで入れ子が崩壊してしまったり、
動作しなくなることばかりで、

そもそも「アニメーション」って必要か？

と、諦めてしまいたくなるのです。

別関数で無名関数を分割

いやいや、一度しか呼ばないような処理だから「無名」でいいんだろ？

と言うのは、置いておいて、
後から見た時に少しでも分かりやすい書き方をしておきたい。

忘れたことにソースを見て、
「window.setInterval(function() {．．．}, 20);」の「, 20」部分が、
window.setIntervalの第二パラメータであることに、
ぱっと気づくことが自分にはできないと思うのです。

そしてさらに、
無名関数自体にパラメータを渡したい場合などにはより面倒になってきます。

そこで、以下のような別の記述方法を試すことをしました。

別関数化案：Animating Symbols|Google Maps JavaScript API|Google Developers

当サイトにお越しいただきありがとうございます。
当サイトは管理人アルゴリズンが個人で作成を行っているものです。
Google Inc.様とは一切関係はありません。

当サイト内のコンテンツの引用・出典の明記なきものは、
すべて管理人アルゴリズンが著作権を保持するオリジナルコンテンツです。
当サイトでご紹介しております写真等がある場合にも著作権の放棄は致しません。

申し訳ございませんが、無断転載、複製をお断りさせて頂いております。
尚、サイト内コンテンツを引用される際にはご連絡は不要です。
ただし、出典元として当サイト(個別URL)へのリンクをお願いいたします。

コンテンツを有益であると感じていただけましたら非常に光栄です。
ありがとうございます。

記事の作成依頼・更新依頼・削除要請などのご意見ご要望は、
まず、Twitter等よりメンションまたは、メッセージでご連絡を頂けますと幸いです。
@algorhythnn｜Twitter
algorhythnn｜Google+
algorhythnn｜Facebook

運営者はSNS等で個人名等の公開は行わないポリシーで運営しております。
直接のご連絡・取材時などには個人名・屋号でご連絡を差し上げる場合もございますが、
個人名・屋号等をインターネット上で公開されることはご遠慮願います。