jquery.gmap3.js

/*-----------------------------------------------------
jQuery Google Maps 3 Plugin (by forestk)

Copyright (C) 2010 forestk <http://www.forestk.com/>
Code licensed under the MIT License <http://www.opensource.org/licenses/mit-license.php>
Date: 2010-03-18
@author forestk <http://www.forestk.com/>
@version 0.91
-----------------------------------------------------*/

/*
 * 2010-03-28 rewrite for sample by @kosugi http://twitter.com/kosugi
 */

/*-----------------------------------------------------
Usage

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=ja&amp;region=JP"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.gmap3.js"></script>
<script type="text/javascript">
$(function(){
    $('#gmap1').gmap3({
        address: '渋谷駅',
        title: 'ココです！'
    });
    $('#gmap2').gmap3({
        latitude: 43.068625,
        longitude: 141.350801,
        zoom: 10,
        title: 'ココです！',
        scale: false,
        type: 3,
        control: 2,
        navigation: 2
    });
})(JQuery);
</script>

<div id="gmap1" style="width: 480px; height: 320px;"></div>
<div id="gmap2" style="width: 480px; height: 320px;"></div>

address: 住所を設定します。（この住所でジオコーディングし、インフォメーション・バルーンに表示します。デフォルトは無記入です。）
latitude: 緯度を設定します。address が無い場合のみこの緯度を表示します。（デフォルトは36.2048240です）
longitude: 軽度を設定します。address が無い場合のみこの軽度を表示します。（デフォルトは138.2529240です）
zoom: ズーム率を設定します。（デフォルトは15です）
altAddress: 住所を設定します。（ジオコーディングを使用しなかった場合、インフォメーション・バルーンに表示します。デフォルトは無記入です。）
title: タイトルを設定します。（マーカーのタイトルを設定します）
scale: スケールを設定します。（true で表示、false で非表示にします。デフォルトは true です）
type: マップタイプの種類を設定します。（1:ROADMAP, 2:HYBRID, 3:SATELLITE, 4:TERRAIN, デフォルトは ROADMAP です）
control: コントローラーの種類を設定します。（1:DEFAULT, 2:HORIZONTAL_BAR, 3:DROPDOWN_MENU, デフォルトは DEFAULT です）
navigation: ナビゲーションの種類を設定します。（1:DEFAULT, 2:SMALL, 3:ZOOM_PAN, 4:ANDROID, デフォルトは ROADMAP です）
-----------------------------------------------------*/

(function($){

    // ショートカット
    var maps = google.maps;

    // マップタイプの選択肢
    var types = {
        1: maps.MapTypeId.ROADMAP,
        2: maps.MapTypeId.HYBRID,
        3: maps.MapTypeId.SATELLITE,
        4: maps.MapTypeId.TERRAIN
    };

    // コントローラの選択肢
    var ctrls = {
        1: maps.MapTypeControlStyle.DEFAULT,
        2: maps.MapTypeControlStyle.HORIZONTAL_BAR,
        3: maps.MapTypeControlStyle.DROPDOWN_MENU
    };

    // ナビゲーションの選択肢
    var navs = {
        1: maps.NavigationControlStyle.DEFAULT,
        2: maps.NavigationControlStyle.SMALL,
        3: maps.NavigationControlStyle.ZOOM_PAN,
        4: maps.NavigationControlStyle.ANDROID
    };

    // インフォメーションバルーンを作る
    var createBalloon = function(config) {

        // 住所文字列決定 (altAddress 優先)
        var address;
        if (config.altAddress) {
            address = config.altAddress;
        }
        else if (config.address) {
            address = config.address;
        }

        // 内容 (せっかくなので JQuery オブジェクトを使って)
        var content = $('<div id="content" class="vcard" />'); // TODO ここ id でいいのかな
        content.append($('<h3 class="fn org" />').append(
            $('<a class="url" />').attr('href', '#').text(config.title) // TODO リンク先は?
        ));
        if (address) {
            content.append($('<p class="adr" />').text(address));
        }

        // 作って返す
        return new maps.InfoWindow({
            content: $('<div />').append(content).html() // TODO ちょっと格好悪い
        });
    }

    // 指定された設定, 場所, 要素で地図を表示する
    var show = function(div, config, location) {

        var map = new maps.Map(div, {
            zoom: config.zoom,
            scaleControl: config.scale,
            mapTypeId: types[config.type] || types[1],
            mapTypeControl: true,
            mapTypeControlOptions: { style: ctrls[config.control] || ctrls[1] },
            navigationControl: true,
            navigationControlOptions: { style: navs[config.navigation] || navs[1] }
        });
        map.setCenter(location);
        var marker = new maps.Marker({
            position: location, map: map, title: config.title
        });
        var infoWindow = createBalloon(config);
        maps.event.addListener(marker, 'click', function() {
            infoWindow.open(map, marker);
        });
    }

    // プラグイン関数
    $.fn.gmap3 = function(config) {

        config = $.extend({
            title: 'Here',
            latitude: 36.2048240,
            longitude: 138.2529240,
            zoom: 15,
            scale: true
        }, config);

        var map = $(this);
        if (config.address) {
            // 住所が渡された場合は geocode する
            (new maps.Geocoder()).geocode(
                { address: config.address, country: 'jp' },
                function(results, status) {
                    if (status == maps.GeocoderStatus.OK) {
                        show(map.get(0), config, results[0].geometry.location);
                    }
                    else {
                        map.append($('<div class="alert" />').text('地図を表示できません'));
                    }
                }
            );
        }
        else {
            // 経緯度が渡された場合はそのまま表示
            show(map.get(0), config, new maps.LatLng(config.latitude, config.longitude));
        }
    };

})(jQuery);