THE HAM MEDIA BLOG

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

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

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

Google Map APIの利用

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

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

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

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

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

基本的な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のプラグインにしてみました。シンプル過ぎるのですが、地図を表示させるだけ〜なんて時には便利かなと。

jQuery Gmap3 (h2ham Version)

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のオプションだけつけてみました。オプション部分はなくてもＯＫ。デフォルトは15になっています。

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

■Demo

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

■Demo２

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

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