setZoom() でエラーが発生するときの対処法 [Google Maps API]

Google Maps JavaScript API v3 を使ったところ次のような例外が発生した。

Uncaught InvalidValueError: invalid argument to setZoom: 15

コードは次の通り。div 要素に設定された属性 data-lat, data-lng から中心の座標、 data-zoom から縮尺を取得して地図を表示するものだ。jQuery を使っている。

<div class="map-embed" data-lat="36.561049" data-lng="136.663159" data-zoom="15"></div>

var gm = google.maps;

$(".map-embed").each(function() {
	var $container = $(this)
	, lat = $container.attr("data-lat")
	, lng = $container.attr("data-lng")
	, zoom = $container.attr("data-zoom")
	, pos = new gm.LatLng(lat, lng)
	, map = new gm.Map(this, {
		mapTypeId: gm.MapTypeId.ROADMAP
		, center: pos
		, zoom: zoom
	})
	;
});

何のことはない、zoom の値は数値でないといけないのである。次のように parseInt() を使用して文字列を数値に変換することでこの問題は解決する。

...
	, zoom = parseInt($container.attr("data-zoom"))
...