イッツァ◯と◯◯の国

画像化することもできる(横幅640pxが最大?)

オリジナルの吹き出し表示もできる

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/gmaps.js"></script>
<script>
	$(window).load(function(){
		var _map = new GMaps({
			el: '#gmapsDemo01',
			lat: 35.6325292,
			lng: 139.880833,
			zoom: 20,
			zoomControl : true,
			zoomControlOpt: {
				style : 'SMALL',
				position: 'TOP_LEFT'
			},
			panControl : false,
			streetViewControl : false,
			mapTypeControl: false,
			overviewMapControl: false
		}).setMapTypeId("satellite");
		var url = GMaps.staticMapURL({
			size: [880, 250],
			lat: 35.705666,
			lng: 139.751886,
			zoom: 16,
			markers: [
				{lat: 35.705666, lng: 139.751886}
			]
		});
		var _map2 = new GMaps({
			el: '#gmapsDemo03',
			lat: 34.930406,
			lng: 135.759577,
			zoom: 1,
			zoom_changed: function(e) {
				var $_ele = $('#gmapsDemo03 .overlay span');
				switch(e.zoom) {
					case 3:
						$_ele.text('歴史に関係あります');
						break;
					case 6:
							$_ele.text('近畿地方の...');
							break;
					case 9:
							$_ele.text('京都の...');
							break;
					case 10:
							$_ele.text('江戸末期から明治に...');
							break;
					case 12:
							$_ele.text('大活躍した人物が...');
							break;
					case 14:
							$_ele.text('好んで...');
							break;
					case 15:
							$_ele.text('頻繁に利用した...');
							break;
					case 17:
							$_ele.text('宿といえば...');
							break;
					case 20:
							$_ele.text('寺田屋といえば龍馬');
							break;
				}
			}
		});
		_map2.drawOverlay({
			lat: _map2.getCenter().lat(),
			lng: _map2.getCenter().lng(),
			layer: 'overlayLayer',
			content: '<div class="overlay"><span>ここはどこでしょう?</span><div class="overlay_arrow above"></div></div>',
			verticalAlign: 'top',
			horizontalAlign: 'center'
		});
		$('<img/>').attr('src', url).appendTo($('#gmapsDemo02'));
	});
</script>
<p class="title">イッツァ◯と◯◯の国</p>
<div id="gmapsDemo01" class="gmaps-demo"></div>

<p class="title">画像化することもできる(横幅640pxが最大?)</p>
<div id="gmapsDemo02" class="gmaps-demo"></div>

<p class="title">オリジナルの吹き出し表示もできる</p>
<div id="gmapsDemo03" class="gmaps-demo"></div>

gmapsについて

gmasは、google mapsを色々と便利にしてくれるプラグインです。
いろいろな機能が用意されているので、ユーザーの利便性向上を狙うならぜひご利用を
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Maplace

    Maplace

    google mapsを色々とカスタマイズできる