GoogleMapをタブで切り替える
Result
jQuery
/* 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){
if ($addrdiv.data('$lastselectedli'))
$addrdiv.data('$lastselectedli').removeClass('selected')
$li.addClass('selected')
//iframeにアドレスを入れる
window.frames[$mapiframe.attr('name')].location.replace($li.data('addr'))
//拡大用のリンクへの埋め込み
$mapiframe.data('$largemaplink').attr('href', $li.data('addr').replace('&output=embed', ''))
$addrdiv.data('$lastselectedli', $li)
},
init:function(addrwrapper, mapwrapper, persist){
jQuery(function($){
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') //class="largermap"を探す
$mapiframe.data('$largemaplink', $largemaplink) //拡大用リンクをdata()で格納する
$lis.each(function(){
var $li=$(this)
var $address=$li.find('a[href^="http://maps.google.com"]') //li内のGoogle mapリンクを探す
$address.each(function(){
var $addr=$(this)
$addr.attr({href:this.getAttribute('href')+'&output=embed', target:mapiframetarget}) //属性追加
$addr.click(function(e){
//Google mapをロードする。切り替え時にリクエストするのでページのロード時間を抑えられます。
googlemapselector.selectaddr($addrdiv, $li, $mapiframe)
e.preventDefault()
})
})
$li.data('addr', $address.eq(0).attr('href'))
if ($li.hasClass('selected')){
googlemapselector.selectaddr($addrdiv, $li, $mapiframe)
$addrdiv.data('$lastselectedli', $li)
return
}
})
})
}
}
googlemapselector.init('addrcolumn', 'mapcolumn')
css
#mapcontainer{
overflow:hidden;
width: 800x;
}
#addrcolumn{
float:left;
width: 160px;
margin-right:20px;
}
#addrcolumn ul.location{
list-style-type: none;
margin: 0;
padding: 0;
}
#addrcolumn ul.location li{
margin-bottom:10px;
position:relative;
padding:10px;
background: #DFDFDF;
}
#addrcolumn ul.location li.selected:after{
position:absolute;
content:'';
border-color:transparent transparent transparent #DFDFDF;
left:100%;
top:0;
border-style: solid;
border-width: 15px;
}
#mapcolumn{
float:left;
width: 400px;
}
#mapcolumn iframe{
width: 400px;
height:300px;
}
html
<div id="mapcontainer">
<div id="addrcolumn">
<ul class="location">
<li class="selected"><a href="http://maps.google.com/maps?q=%E6%9D%B1%E4%BA%AC%E9%83%BD%E4%B8%96%E7%94%B0%E8%B0%B7%E5%8C%BA%E5%8C%97%E6%B2%A23-1-3&hl=en&ie=UTF8&ll=35.665987,139.673213&spn=0.00672,0.016512&sll=35.664209,139.66614&sspn=0.006721,0.016512&vpsrc=0&hnear=Japan,+T%C5%8Dky%C5%8D-to+Setagaya-ku%E5%8C%97%E6%B2%A2%EF%BC%93%E4%B8%81%E7%9B%AE%EF%BC%91%E2%88%92%EF%BC%93&t=m&z=17">下北沢ローソン</a>
</li>
<li><a href="http://maps.google.com/maps?q=%E9%AB%98%E5%B0%BE%E5%B1%B1&hl=en&ie=UTF8&sll=-16.500451,-151.741447&sspn=0.06345,0.132093&vpsrc=0&hnear=Takaosan+Station,+Japan&t=m&z=13">高尾山</a>
</li>
</ul>
</div>
<div id="mapcolumn">
<iframe name="mapiframe1" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com?output=embed"></iframe>
<br />+ <a href="http://maps.google.com" class="largermap"">大きい地図で見る</a>
</div>
</div>
via
Dynamic Drive DHTML Scripts- Google Map Selector