ゼロと無限の間に

フリーでオープンソースなJavaScriptとかPHPとか。

ユーザ用ツール

サイト用ツール


サイドバー

何かありましたら、メールで連絡いただくか、ブログのどこかにコメント入れてくださいね ^_^

Menu

ゼロと無限の間に

はじめに

作った主なサイト

作った主な便利ツール(無料)

ログ (Blog)

javascript:google-mapper-v3

以前のリビジョンの文書です


Google Maps API V3を使って地図をお手軽に表示 - Google Mapper V3

(更新履歴とコメントはGoogle Mapper Archive - ゼロと無限の間のログでどうぞ。)

Google Maps APIのバージョン3(V3)が公開されたので、Google Mapperもそれに対応させてみた。

Google Maps API V3はまだLabs版でV2に比べて実装されている機能が少ない公式版になったけどまだV2の全ての機能を実装していないので、元のGoogle Mapperは残しておいて、それとは別に新しくGoogle Mapper V3を書き直した。

サンプル

ライセンス

ダウンロード

google-mapper-v3.js

※ダウンロードできるのは最新のBeta版の場合もあります

使い方の例

準備

<script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/path/to/your/google-mapper-v3.js"></script>

あとは、ソースコードの中のGoogleMapper.demo()を参考に。 ;-)

例えばこんなことができる。

Googleマップを表示する

//mapIdは地図を表示するdiv等のid属性
GoogleMapper.show(mapId, lat, lng, zoom);

マーカーを表示する

GoogleMapper.addMarker(35.7, 139.7, "東京");

アイコン画像を指定してマーカーを表示する

GoogleMapper.addMarker(35.7, 139.7, "東京", iconUrl);

色を指定してマーカーを表示する

GoogleMapper.addColorMarker(34.7, 135.5, "大阪", "FF0");

色を指定してマーカーを表示して、その中に文字を表示する

GoogleMapper.addColorMarker(34.7, 135.5, "大阪", "FF0", "000", "虎");

吹出し型のマーカーを表示する

var naha = GoogleMapper.addBubbleMarker(26.2, 127.7, "那覇");

日本列島表示時にちょうどよい沖縄のミニ地図を表示する

GoogleMapper.showOkinawa();

逆ジオコーディングして地名をタイトルバーに表示する

GoogleMapper.searchByLatLng(latLng, function(response, status) {
    if (GoogleMapper.checkResponseStatus(status)) {
        document.title = GoogleMapper.getGeocodeAddress(response[0]);
    }
});

二つの地点間の車または徒歩の道順を表示する

if (GoogleMapper.demo.startFlg) { //スタート地点指定済みの場合
    GoogleMapper.demo.startFlg = false;
    GoogleMapper.direct(latLng);
    return "";
}
 
GoogleMapper.demo.startFlg = false;
 
GoogleMapper.demo.startRouting = function(mode) {
    GoogleMapper.mapClickable = false;
    GoogleMapper.demo.startFlg = true;
    GoogleMapper.direct(latLng, mode, routerPanelId);
    GoogleMapper.closeInfoWindow();
};
 
h += "<br /><br />ここから次にクリックする場所までの道順を表示できます<br />";
 
var modes = {
    DRIVING: "車",
    //BICYCLING: "自転車",  //日本は未対応
    WALKING: "歩き"
};
 
for (var mode in modes) {
    h += '<input type="button" value="' + modes[mode] + 'の場合"';
    h += ' onclick="GoogleMapper.demo.startRouting(';
    h += 'google.maps.DirectionsTravelMode.' + mode + ')" /> ';
}

地名や施設名等で検索する(ジオコーディング)

function search(keywordInputId) {
    var searchBox = document.getElementById(keywordInputId);
    GoogleMapper.search(searchBox.value);
    searchBox.focus();
};

広告(Google AdSense)を表示する

GoogleMapper.showAds("AdSenseのPublisher ID");

なお、AdSenseを表示するには、Google MapsのJavaScriptの読み込みでライブラリとしてAdSenseを指定する必要がある。

<script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false&amp;libraries=adsense"></script>
<script type="text/javascript" src="google-mapper-v3.js"></script>

ソースコード

/**
 *  GoogleMapper V3 - (The Wrapper Class of Google Maps API V3)
 *  @see       http://0-oo.net/sbox/javascript/google-mapper-v3
 *  @version   0.4.0
 *  @copyright 2008-2011 dgbadmin@gmail.com
 *  @license   http://0-oo.net/pryn/MIT_license.txt (The MIT license)
 *
 *  See also Google Maps API V3 documents.
 *  @see http://code.google.com/intl/ja/apis/maps/documentation/javascript/
 *  @see http://code.google.com/intl/en/apis/maps/documentation/javascript/reference.html
 */
var GoogleMapper = {
    /** Mapオブジェクト */
    map: null,
 
    /** Mapをクリック可能か(beClickable()内でのmapのclickイベントの制御用) */
    mapClickable: false,
 
    /** 最後に開いた吹き出しオブジェクト */
    lastInfoWindow: null,
 
    /** 地名による検索時にリスト表示する最大件数 */
    maxCount: 10
};
/**
 *  地図を表示する(デフォルトは日本列島)
 *  @param  String  mapId   地図表示に使う要素(div等)のid属性
 *  @param  Number  lat     中心地点の緯度
 *  @param  Number  lng     中心地点の経度
 *  @param  Number  zoom    ズーム値
 */
GoogleMapper.show = function(mapId, lat, lng, zoom) {
    GoogleMapper.map = new google.maps.Map(document.getElementById(mapId), {
        center: new google.maps.LatLng((lat || 38), (lng || 137.5)),
        zoom: (zoom || 5),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true
    });
};
/**
 *  マーカーを追加する
 *  (マーカーをクリックするとGoogleMapper.getInfo()の内容を吹き出しに表示する)
 *  @param  Number  lat     緯度
 *  @param  Number  lng     経度
 *  @param  String  title   (Optional) ツールチップ表示する文字列
 *  @param  String or MarkerImage   image   (Optional) マーカー画像のURL or MarkerImage
 *  @return Marker  openInfoWindow()を追加されたMarkerオブジェクト
 *
 *  (参考)Google Maps用のマーカー画像の配布サイト
 *  @see http://code.google.com/p/google-maps-icons/
 */
GoogleMapper.addMarker = function(lat, lng, title, image) {
    var marker = new google.maps.Marker({
        map: GoogleMapper.map,
        position: new google.maps.LatLng(lat, lng),
        title: (title || ""),
        icon: image
    });
 
    marker.openInfoWindow = function() {
        GoogleMapper.openInfoWindow(GoogleMapper.getInfo(marker), null, marker);
    };
 
    google.maps.event.addListener(marker, "click", marker.openInfoWindow);
 
    return marker;
};
/**
 *  Google Chart APIを使ってマーカー画像を生成する
 *  @param  Number  lat         緯度
 *  @param  Number  lng         経度
 *  @param  String  title       (Optional) ツールチップ表示する文字列
 *  @param  String  bgColor     (Optional) 背景(塗り潰し)色(例:FFFFFF)
 *  @param  String  textColor   (Optional) 文字色(例:000000)
 *  @param  String  str         (Optional) マーカー上に表示する文字
 *  @return String or MakerImage
 *  @see http://code.google.com/intl/ja/apis/chart/docs/gallery/dynamic_icons.html
 */
GoogleMapper.addColorMarker = function(lat, lng, title, bgColor, textColor, str) {
    var type = "d_map_pin_letter_withshadow";
    var url = GoogleMapper._getIconURL(type, null, str, (bgColor || "F30"), textColor);
    var image = new google.maps.MarkerImage(
        url,
        new google.maps.Size(37, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34)   //指定しないと影も含めてセンタリングされる
    );
 
    var marker = GoogleMapper.addMarker(lat, lng, title, image);
    marker.setShape({coords: [0, 0, 20, 20], type: "rect"});    //丸い部分だけクリックできる
 
    return marker;
};
/**
 *  Google Chart APIを使って吹き出し画像を生成する
 *  @param  Number  lat         緯度
 *  @param  Number  lng         経度
 *  @param  String  str         吹き出しに表示する文字列
 *  @param  String  bgColor     (Optional) 背景(塗り潰し)色(例:FFFFFF)
 *  @param  String  textColor   (Optional) 文字色(例:000000)
 *  @param  String  style       (Optional) 吹き出し形状(尻尾無しは"bbT")
 *  @return String or MakerImage
 *  @see http://code.google.com/intl/ja/apis/chart/docs/gallery/dynamic_icons.html
 */
GoogleMapper.addBubbleMarker = function(lat, lng, str, bgColor, textColor, style) {
    var type = "d_bubble_text_small";
    var style = style || "bb";
    var icon = GoogleMapper._getIconURL(type, style, str, (bgColor || "FF0"), textColor);
 
    var iconY = -1, shadowY = -1;
    switch (style) {
        case "bb":      //左下に着地点
            iconY = 42;
            shadowY = 45;
            break;
        case "bbtl":    //左上に着地点
            iconY = 0;
            shadowY = 0;
            break;
    }
 
    if (iconY > -1) {
        //位置の調整
        var point = new google.maps.Point(0, iconY);
        icon = new google.maps.MarkerImage(icon, null, null, point);
    }
 
    var marker = GoogleMapper.addMarker(lat, lng, str, icon);
 
    if (shadowY > -1) {
        //影を付ける
        var shadowUrl = GoogleMapper._getIconURL(type + "_shadow", style, str, "");
        var shadowPoint = new google.maps.Point(0, shadowY);
        marker.setShadow(new google.maps.MarkerImage(shadowUrl, null, null, shadowPoint));
    }
 
    return marker;
};
/**
 *  Google Chart APIのDynamic IconのURLを生成する
 */
GoogleMapper._getIconURL = function(iconType, style, str, bgColor, textColor) {
    var url = "";
 
    if (location.protocol == "http:") {
        url = "http://chart.apis";
    } else {
        url = "https://www";
    }
 
    url += ".google.com/chart?chst=" + iconType + "&chld=";
 
    var params = [style, encodeURIComponent(str || ""), bgColor, (textColor || "")];
 
    if (!style) {
        params.shift();
    }
 
    return url + params.join("|");
};
/**
 *  吹き出しに表示する内容を作る
 *  @param  Marker  marker  吹き出しを表示するマーカー
 */
GoogleMapper.getInfo = function(marker) {
    return marker.title;
};
/**
 *  吹き出しを表示する(latLngとmarkerはどちらか一方を渡す)
 *  @param  String  content 吹き出しの中身のHTML
 *  @param  LatLng  latLng  (Optional) 吹き出しを表示する位置
 *  @param  Marker  marker  (Optional) 吹き出しを表示するマーカー
 */
GoogleMapper.openInfoWindow = function(content, latLng, marker) {
    if (!content) {
        return;
    }
 
    GoogleMapper.closeInfoWindow();
    GoogleMapper.map.getStreetView().setVisible(false);
 
    var infoWindow = new google.maps.InfoWindow({ content: content, position: latLng });
    infoWindow.open(GoogleMapper.map, marker);
    GoogleMapper.lastInfoWindow = infoWindow;
};
/**
 *  吹き出しを閉じる
 */
GoogleMapper.closeInfoWindow = function() {
    if (GoogleMapper.lastInfoWindow) {
        GoogleMapper.lastInfoWindow.close();
    }
};
/**
 *  地図をクリック可能にする(ダブルクリックによるズームはできなくなる)
 *  @param  Function    callback    クリック時に呼び出されるCallback関数
 *                                  クリックされた地点のLatLngが渡される
 *                                  文字列(HTML可)を返すとそれを吹き出しに表示する
 */
GoogleMapper.beClickable = function(callback) {
    //ダブルクリックはクリックイベントも発生するので無効にする
    GoogleMapper.map.disableDoubleClickZoom = true;
    GoogleMapper.mapClickable = true;
 
    google.maps.event.addListener(GoogleMapper.map, "click", function(event) {
        if (GoogleMapper.mapClickable) {
            GoogleMapper.openInfoWindow(callback(event.latLng), event.latLng);
        } else {
            GoogleMapper.mapClickable = true;
        }
    });
};
/**
 *  地名や施設名等で検索する(ジオコーディング)
 *  @param  String      keywords    検索したいキーワード
 *  @param  Function    callback    検索結果が渡されるCallback関数
 */
GoogleMapper.search = function(keywords, callback) {
    if (keywords) {
        (new google.maps.Geocoder()).geocode(
            { address: keywords },
            GoogleMapper.searchCallback
        );
    }
};
/**
 *  地名や施設名等で検索する(ジオコーディング)のコールバック関数
 *  1件の場合は地図上でその場所に移動、2件以上の場合は内容をalert()で表示
 *  @param  Array           response    GeocoderResponseの配列
 *  @param  GeocoderStatus  status
 *  @see http://code.google.com/intl/ja/apis/maps/documentation/v3/reference.html#Geocoder
 */
GoogleMapper.searchCallback = function(response, status) {
    if (!GoogleMapper.checkResponseStatus(status)) {
        return;
    }
    var len = response.length;
    if (len == 1) {
        GoogleMapper.map.panTo(GoogleMapper.getGeocodeLatLng(response[0]));
        return;
    }
    var msg = len + "件ヒットしました\n";
    if (len <= GoogleMapper.maxCount) {
        for (var i = 0; i < len; i++) {
            msg += "・" + GoogleMapper.getGeocodeAddress(response[i]) + "\n";
        }
    }
    alert(msg + "詳細な地名を追加してください");
};
/**
 *  緯度経度から地名を検索する(逆ジオコーディング)
 *  @param  LatLng      latLng      緯度経度
 *  @param  Function    callback    検索結果が渡されるCallback関数
 */
GoogleMapper.searchByLatLng = function(latLng, callback) {
    (new google.maps.Geocoder()).geocode({ latLng: latLng }, callback);
};
/**
 *  ある地点からある地点までの道順を表示する
 *  1度目に出発地点、2度目に目的地のlatLngを渡す
 *  @param  String / LatLng point   地名 or LatLngオブジェクト
 *  @param  String          mode    (Optional) 移動手段(省略すると車)
 *                                             DirectionsTravelModeの定数のどれか
 *  @param  String          panelId (Optional) 道順の説明を表示するdiv等のid
 */
GoogleMapper.direct = function(point, mode, panelId) {
    if (!GoogleMapper._router) {    //1回目の呼び出しの場合
        GoogleMapper._router = { from: point, mode: mode, panelId: panelId };
        return;
    }
 
    var router = GoogleMapper._router;
    GoogleMapper._router = null;
 
    var renderer = new google.maps.DirectionsRenderer({
        map: GoogleMapper.map,
        draggable: true
    });
 
    var panel = null;
    panelId = (panelId || router.panelId);
 
    if (panelId) {  //道順の詳細を別パネルに表示する場合
        panel = document.getElementById(panelId);
        panel.innerHTML = "データを取得しています<br />しばらくお待ちください";
        renderer.setPanel(panel);
    }
 
    var request = {
        origin: router.from,
        destination: point,
        travelMode: (mode || router.mode || google.maps.DirectionsTravelMode.DRIVING),
        provideRouteAlternatives: true,
        unitSystem: google.maps.DirectionsUnitSystem.METRIC
    };
 
    var callback = function(response, status) {
        if (panel) {
            panel.innerHTML = "";
        }
 
        if (GoogleMapper.checkResponseStatus(status)) {
            renderer.setDirections(response);
        }
    };
 
    (new google.maps.DirectionsService()).route(request, callback);
};
/**
 *  GeocoderStatusの内容をチェックする
 *  エラーの場合はalert()を表示する
 *  @param  GeocoderStatus  status
 *  @return Boolean true: OK, false: OK以外
 */
GoogleMapper.checkResponseStatus = function(status) {
    switch (status) {
        case "OK":
            return true;
        case "ZERO_RESULTS":
            alert("該当する地域がありませんでした");
            break;
        default:
            alert("エラーが発生しました (" + status + ")");
    }
    return false;
};
/**
 *  GeocoderResponseから主な地名を取り出す
 *  @param  GeocoderResponse    geocodeResult
 *  @return String  地名
 */
GoogleMapper.getGeocodeAddress = function(geocodeResult) {
    var address = "";
    var components = geocodeResult.address_components;
    for (var i = components.length - 2; i >= 0; i--) {  //国名は省略
        var name = components[i].long_name;
        if (!name.match(/^(日本|[0-9]{3}-[0-9]{4})$/)) {    //郵便番号も無視
            address += " " + name;
        }
    }
    return address.substring(1);
};
/**
 *  GeocoderResponseからLatLngオブジェクトを作る
 *  @param  GeocoderResponse    geocodeResult
 *  @return LatLng
 */
GoogleMapper.getGeocodeLatLng = function(geocodeResult) {
    var location = geocodeResult.geometry.location;
    return new google.maps.LatLng(location.lat(), location.lng());
};
/**
 *  地図上に広告(Google AdSense)を表示する
 *  @param  String          pubId       表示するAdSenseユニットのID
 *  @param  AdFormat        format      (Optional) AdSenseの形状
 *  @param  ControlPosition position    (Optional) 地図上のどこに表示するか
 *  @param  String          channel     (Optional) AdSenseのチャネル番号
 *  @see http://code.google.com/intl/ja/apis/maps/documentation/javascript/advertising.html
 */
GoogleMapper.showAds = function(pubId, format, position, channel) {
    (new google.maps.adsense.AdUnit(document.createElement("div"), {
        channelNumber: channel,
        format: format || google.maps.adsense.AdFormat.BANNER,
        map: GoogleMapper.map,
        position: position || google.maps.ControlPosition.TOP_CENTER,
        publisherId: pubId
    }));
};
/**
 *  メインの地図に重ねて、右下に沖縄のミニ地図を表示
 *  @param  Array   markers (Optional) メイン地図に表示したMarkerの配列
 */
GoogleMapper.showOkinawa = function(markers) {
    var map = GoogleMapper.map;
    google.maps.event.addListener(map, "tilesloaded", function() {
        google.maps.event.clearListeners(map, "tilesloaded");
 
        //表示領域
        var outer = map.getDiv().appendChild(document.createElement("div"));
        outer.style.position = "absolute";
        outer.style.right = 0;
        outer.style.bottom = "1.2em";
        outer.style.overflow = "hidden";
        outer.style.width = "150px";
        outer.style.height = outer.style.width;
        outer.style.border = "solid 0 #ccc";
        outer.style.borderWidth = "3px 0 3px 3px";
 
        //実際に地図が載るところ
        var inner = outer.appendChild(document.createElement("div"));
        inner.style.height = "250px";
        inner.style.top = "-50px";
 
        var okinawa = new google.maps.Map(inner, {
            center: new google.maps.LatLng(26.5, 127.9),    //沖縄本島の中心あたり
            zoom: map.getZoom(),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true, //操作系は不可で
            disableDoubleClickZoom: true,
            draggable: false,
            keyboardShortcuts: false,
            scrollwheel: false
        });
 
        //閉じるボタン
        var closeBtn = outer.appendChild(document.createElement("div"));
        closeBtn.innerHTML = "×";
        closeBtn.style.position = "absolute";
        closeBtn.style.top = 0;
        closeBtn.style.right = 0;
        closeBtn.style.padding = "0 3px";
        closeBtn.style.backgroundColor = "#ddd";
        closeBtn.style.cursor = "pointer";
        closeBtn.onclick = function() { outer.style.display = "none"; };
 
        //ミニ地図をクリックすると拡大してメインの地図に表示
        google.maps.event.addListener(okinawa, "click", function() {
            map.setCenter(okinawa.getCenter());
            map.setZoom(okinawa.getZoom() + 4);
        });
 
        //メイン地図と同じ位置にマーカーを表示
        if (!markers) {
            return;
        }
        var addMarker = function (origin) {
            var marker = new google.maps.Marker({
                position: origin.position,
                title: origin.title,
                icon: origin.icon,
                shadow: origin.shadow
            });
            marker.setMap(okinawa);
            google.maps.event.addListener(marker, "click", origin.openInfoWindow);
        };
        for (var i = 0, len = markers.length; i < len; i++) {
            addMarker(markers[i]);
        }
    });
};
/******************************************************************************
 *  使用例
 *  GoogleMapeer.demo("gmap", "route", "keywords");
 *  @param  String  mapId           地図を表示する場所(div等)のid属性
 *  @param  String  routerPanelId    (Optional) 道順を表示する場所(div等)のid属性
 *  @param  String  keywordInputId   (Optional) 検索用テキストボックスのid属性
 ******************************************************************************/
GoogleMapper.demo = function(mapId, routerPanelId, keywordInputId) {
    //地図を表示(緯度経度ズームを渡さないと日本列島を表示する)
    GoogleMapper.show(mapId);
 
    //マーカーを表示
    var iconUrl = "http://google-maps-icons.googlecode.com/files/moderntower.png";
    GoogleMapper.addMarker(35.7, 139.7, "東京", iconUrl).openInfoWindow();  //最初から開く
    //マーカーの色を変える
    GoogleMapper.addColorMarker(34.7, 135.5, "大阪", "FF0", "000", "虎");
    //マーカーを吹き出し型にする
    var naha = GoogleMapper.addBubbleMarker(26.2, 127.7, "那覇");
 
    //沖縄のミニ地図を表示
    GoogleMapper.showOkinawa([naha]);
 
    //地図上をクリック可能にする
    GoogleMapper.beClickable(function(latLng) { //クリックされた時のCallback関数
        //逆ジオコーディングして地名をタイトルバーに表示
        GoogleMapper.searchByLatLng(latLng, function(response, status) {
            if (GoogleMapper.checkResponseStatus(status)) {
                document.title = GoogleMapper.getGeocodeAddress(response[0]);
            }
        });
 
        //緯度・経度を吹き出しに表示
        var h = "緯度: " + latLng.lat() + "<br />経度: " + latLng.lng();
 
        //二つの地点間の車または徒歩の道順を表示
        if (GoogleMapper.demo.startFlg) { //スタート地点指定済みの場合
            GoogleMapper.demo.startFlg = false;
            GoogleMapper.direct(latLng);
            return "";  //この場合は吹き出し表示なし
        }
        GoogleMapper.demo.startFlg = false;
        GoogleMapper.demo.startRouting = function(mode) {
            GoogleMapper.mapClickable = false;
            GoogleMapper.demo.startFlg = true;
            GoogleMapper.direct(latLng, mode, routerPanelId);
            GoogleMapper.closeInfoWindow();
        };
 
        h += "<br /><br />ここから次にクリックする場所までの道順を表示できます<br />";
 
        var modes = {
            DRIVING: "車",
            //BICYCLING: "自転車",  //日本は未対応
            WALKING: "歩き"
        };
        for (var mode in modes) {
            h += '<input type="button" value="' + modes[mode] + 'の場合"';
            h += ' onclick="GoogleMapper.demo.startRouting(';
            h += 'google.maps.DirectionsTravelMode.' + mode + ')" /> ';
        }
 
        return h;   //戻り値が吹き出しに表示される
    });
 
    //道順の終点はマーカーでもOKにする
    GoogleMapper.getInfo = function(marker) {
        if (GoogleMapper.demo.startFlg) {   //スタート地点指定済みの場合
            GoogleMapper.demo.startFlg = false;
            GoogleMapper.direct(marker.position);
            return "";
        }
        return marker.title;
    };
 
    //地名や施設名等で検索する(ジオコーディング)
    GoogleMapper.demo.search = function() {
        var searchBox = document.getElementById(keywordInputId);
        GoogleMapper.search(searchBox.value);
        searchBox.focus();
    };
 
    //Firebugがあれば、中心点とズーム値をコンソールに表示
    if (!window.console || !window.console.log) {
        return;
    }
    var map = GoogleMapper.map;
    var log = function() {
        var center = map.getCenter();
        var latlng = "lat:" + center.lat() + ", lng:" + center.lng();
        console.log(latlng + ", zoom:" + map.getZoom());
    };
    google.maps.event.addListener(map, "idle", log);
};
javascript/google-mapper-v3.1299161243.txt.gz · 最終更新: 2011/03/03 23:07 by dgbadmin