• かちびと.net

    タブで切り替え可能な地図をGoogleMapで実装する為のjQueryコードサンプル。複数ロードしないので軽量化とユーザービリティ向上を望めますね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

タブで切り替え可能な地図を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

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services