[JS]Google Mapsと連動してパネル表示も切り替えるスクリプト

ナビゲーションのホバーに合わせて、Google Mapsとパネルの表示を切り替えるスクリプトを紹介します。

スクリプトのベースにはjQueryが使用されており、ナビゲーションのリスト要素にはGoogle Mapsの座標データを記述しています。

HTML

<li data-geo-lat="41.9786" data-geo-long="-87.9047">
<h3>O'Hare Airport</h3>

Flights n' stuff
<p class="longdesc"><strong>About:</strong> O'Hare International Airport has been voted the "Best Airport in North America" for 10 years by two separate sources: Readers of the U.S. Edition of Business Traveler Magazine (1998-2003) and Global Traveler Magazine (2004-2007). Travel and Leisure magazine's 2009 "America's Favorite Cities" ranked Chicago's Airport System (O'Hare and Midway) the second-worst for delays, New York City's airport system (JFK, Newark Liberty, and LaGuardia) being the first.
</li>

このコンテンツは下記のサイトからインスパイアされたとのことです。
こちらもGoogle Mapsとコンテンツが連動しており、面白いです。