THE HAM MEDIA BLOG

Google Map Apiを試してみた(ついでにjQueryのプラグイン化)

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
google
map

Google Map APIを使ってみた

先日、Google Mapを利用する機会があったのですが、最初は単に地図があればいいということだけだったようなので、Google MapのAPIとかを利用せずに、地図の右上にあるリンクの作成ででてくるiflameを表示させようと思っていた。

しかし、APIの利用方法ってどうだったかなー?なんて思ったので、以前利用したことがあったのですが、再度調べてみることに。

今はバージョンが3も出ているのですが、それは利用したことがなかったので、それの利用方法メモです。

Google Map APIの利用

バージョン3からはAPIキーが不要とのこと。利用が楽になってますね。

まずはMapを利用するためのライブラリの読み込み

<script type="text/javascript"
 src="http://maps.google.com/maps/api/js?sensor=false"></script>

最後のsensorが必須とのことで、GPSのような位置センサー利用するもので、iPhoneなどのモバイルデバイスでの利用があるならtrueを、そうでなけばfalseを入れておくとのこと。

入れていないとエラーがでる。

201001192.jpg

基本的なJavaScript

window.onliad = gmap();
function gmap() {
        var mapdiv = document.getElementById('map');
    var myOptions = {
        zoom: 数値(0〜19),
        center: new google.maps.LatLng(緯度, 経度),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
    };
    var map = new google.maps.Map(mapdiv, myOptions);
});

表示させたい箇所のIDの指定と、表示位置の緯度と経度の指定、表示倍率の指定だけでいいんですね。後は表示位置のブロックに幅と高さをCSSなどでつけておくと。

以前のAPIキーを入れないと使えない時よりもシンプルに使い安くなっているみたいですね。

マーカーと吹き出し

マーカーと吹き出しを加える場合は、先ほどの内容に次の内容を加えるだけ。

■マーカー

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(緯度, 経度),
    map: map, 
    title: 'マーカーのタイトル'
});

地図上での位置を示すマーカーが表示されるようになります。

■吹き出し

var infowindow = new google.maps.InfoWindow({
    content: '情報ウィンドウ内に表示するHTML',
    size: new google.maps.Size(幅, 高さ)
});
google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
});

jQueryのプラグインにしてみた

上記のこととかを毎回利用方法を考えているのも大変ですし、最近はjQuery使う案件ばかりなので、jQueryのプラグインにしてみました。シンプル過ぎるのですが、地図を表示させるだけ〜なんて時には便利かなと。

pluginの中身


$.fn.gmap = function(latitude,longitude,set) {
    var set = $.extend({
        zoom: 15
    }, set)
    var mapdiv = $(this).get(0);
    var myOptions = {
        zoom: set.zoom,
        center: new google.maps.LatLng(latitude,longitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
    };
    var map = new google.maps.Map(mapdiv, myOptions);
};

利用方法

まずはMapを利用するためのライブラリとjQueryを読み込み、ちょっとした記述を加えるだけ・・・というシンプルなもの。マーカーだしたり、マーカー内のテキスト指定できたりしたらもっとプラグインっぽくなるのかとも思うのですが、まずは地図を表示させるだけで。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript"
 src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery.gmap3.js"></script>
<script type="text/javascript">
$(function(){
    $('#gmap').gmap(latitude,longitude);
});
</script>

それと、表示させるために、上記の例の場合は、id="gmap"というブロックを作り幅と高さを指定しておくだけです。

■オプション

先ほどの部分を一部抜粋。緯度と経度の指定の他にも、zoomのオプションだけつけてみました。オプション部分はなくてもOK。デフォルトは15になっています。

$(表示させる場所).gmap(緯度,経度,{zoom:数値(0〜19)});

■Demo

下のデモは「$('#map').gmap(43.068625,141.350801);」を表示したものです。

ここに地図を表示

■Demo2

そしてこちらは「$('#map2').gmap(37.912027,139.061883,{zoom:13});」と、倍率の指定も入れてあります。

ここに地図を表示

次はもうちょっと機能を増やしてみようかな。jQueryを使わない版も考えてみようかな。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。