タブで切り替え可能な地図をGoogleMapで実装する為のjQueryコードサンプル

勉強用にメモ。タブで複数のGoogleMap
をjQueryで切り替え可能にするコード
です。わりと簡単なコードでユーザーに
とって使いやすい地図を実装出来るの
でちょっと覚えておきたい。仕組みは
結構単純です。

以前、普通のタブで同じように切り替えるようにしたんですが、複数の地図を全部読み込んでしまうのでちょっと微妙だったんですが、これなら切り替え時に読み込んで表示するので表示スピードに対する影響を軽減できます。

Sample

例えば複数店舗があっても一箇所に表示できますね。GoogleMapは便利なんですが、地味に重いのでこういうコードはちょっと覚えておきたいです。

コード

/* Google Map Selector
* Created: Jan 18th, 2011 by DynamicDrive.com. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/


var googlemapselector={

	selectaddr:function($addrdiv, $li, $mapiframe){ /*selects an address by adding CSS class "selected" to LI in question, plus load map inside iframe*/
		if ($addrdiv.data('$lastselectedli'))
			$addrdiv.data('$lastselectedli').removeClass('selected')
		$li.addClass('selected')
		window.frames[$mapiframe.attr('name')].location.replace($li.data('addr')) //load map address inside IFRAME
		$mapiframe.data('$largemaplink').attr('href', $li.data('addr').replace('&output=embed', '')) //change "larger map" link to selected address's URL, but without '&output=embed' suffix
		$addrdiv.data('$lastselectedli', $li)
	},

	init:function(addrwrapper, mapwrapper, persist){
		jQuery(function($){ //on document.ready
			var $mapdiv=$('#'+mapwrapper)
			var $mapiframe=$mapdiv.find('iframe:eq(0)')
			var $addrdiv=$('#'+addrwrapper)
			var $lis=$addrdiv.find('ul.location:eq(0)').find('li')
			var mapiframetarget=$mapiframe.attr('name')
			var $largemaplink=$mapdiv.find('a.largermap') //ref link with class="largermap"
			$mapiframe.data('$largemaplink', $largemaplink) //remember ref to largermap link
			$lis.each(function(){
				var $li=$(this)
				var $address=$li.find('a[href^="http://maps.google.com"]') //find Google map links within LI
				$address.each(function(){
					var $addr=$(this)
					$addr.attr({href:this.getAttribute('href')+'&output=embed', target:mapiframetarget}) //add '&output=embed' to Google map link plus target attribute
					$addr.click(function(e){
						googlemapselector.selectaddr($addrdiv, $li, $mapiframe) //load Google map
						e.preventDefault()
					})
				})
				$li.data('addr', $address.eq(0).attr('href'))
				if ($li.hasClass('selected')){
					googlemapselector.selectaddr($addrdiv, $li, $mapiframe) //load Google map
					$addrdiv.data('$lastselectedli', $li) //remember last selected LI
					return
				}
			})
		})
	}
}

//parameters: 1) ID of DIV containing address UL, 2) ID of column containing Google map IFRAME:
googlemapselector.init('addrcolumn', 'mapcolumn')

li内のa要素をクリックすると、そこに指定されたURLがもともと用意してあったiframe内に渡されてGoogleMapがロードされる、という仕組みなので、「タブを切り替えたら地図をロードする」が可能になる、というコード。

これなら地図のロードは常に1つだけですが、複数の地図を1箇所に表示させることが出来ますね。コードも軽量です。もうちょいダイエットできそうですが・・こういうユーザービリティ向上にjQueryを使いたいところですね。

<ul class="location">
    <li class="selected"><a href="GoogleMapのURL">テキスト</a>
    </li>
</ul>

地図のURLを投げるiframeもname属性を与えておきます。これがないと動きません。

<iframe name="mapiframe1" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com?output=embed"></iframe>

マークアップが割と単純なので導入しやすい気がしました。

便利ですねー。以下を参考にしました。
via: Google Map Selector