地図を簡単に表示できるjQueryプラグイン「jHERE」

地図を簡単に表示できるjQueryプラグイン「jHERE」サンプル 地図を表示する場合GoogleMapを利用すればある程度簡単にできますが、初めての方には難しいところもあります。
そんな時は、jQueryプラグインのjHEREを利用してみてはいかがでしょうか。
nokiaの地図みたいなので、日本の精度はいまいちです。海外を表示させる時に使ってみてください。

使用方法
下記では地図の上に吹き出しを表示する例を紹介しています。
jHEREからファイルをダウンロード。
<script type="text/javascript" src="/test/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/test/js/jhere.js"></script>
<script type="text/javascript">
$(window).on('load', function() {
$('#id名').jHERE({
enable: ['behavior'],
center: [48.858278, 2.294254], //中心点の緯度経度
zoom: 16 //ズームレベル
}).jHERE('bubble', [48.858278, 2.294254], //吹き出しを表示させたい緯度経度
{closable: false, content: 'エッフェル塔'}); //吹き出しのコンテンツ
});
</script>

次に表示させたい場所に上記で記述したidを付与して以下のようにします。
<div id="map"></div>
最後にCSSでマップの大きさを指定すれば完成です。
<style>
#id名 {
height:400px;
width:400px;
}
</style>

地図を簡単に表示できるjQueryプラグイン「jHERE」サンプル

sponsors

「地図を簡単に表示できるjQueryプラグイン「jHERE」」をシェアする

記事作成:
記事URL:

TOP > > > 地図を簡単に表示できるjQueryプラグイン「jHERE」