ゼロと無限の間に

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

ユーザ用ツール

サイト用ツール


javascript:google-mapper-v3

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

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

Google Maps APIのバージョン3(V3)が公開されたので、バージョン2用に作ったGoogle Mapperとは別に、Google Maps API V3用の「Google Mapper V3」を書き直した。
これを使えば、普通に地図を表示する他にも、ストリートビューの表示、Google AdSenseの表示、httpsでのアクセス(SSLで暗号化されたセキュアなページの表示)など、いろいろなことを手軽に実現できる。

(上記の画像はGoogle Maps API V3ではなくGoogle Static Maps APIで表示している。)

サンプル

ライセンス

ダウンロード

google-mapper-v3.js

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

使い方の例

Google Mapper V3のソースコードの中に書いてあるGoogleMapper.demo()も参考に。 ;-)

Google Maps APIのJavaScriptを読み込む

GoogleMapper.load(function() {
    //読み込んだ後に行う処理
});

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", "虎");

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

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

地図とストリートビューを並べて表示する

デフォルトではストリートビューは地図の領域に表示されるので、地図とストリートビューを並べてみることができない。
それでは惜しいので、地図の横にdiv要素を用意して下記のようにすれば、地図とストリートビューを並べて表示できる。

GoogleMapper.setStreetView(streetViewId);

広告(Google AdSense)を表示する

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

GoogleMapper.load(function() {
    GoogleMapper.show(mapDivID);
    GoogleMapper.showAds("AdSenseのPublisher ID");
}, "adsense");

現在位置を取得する

iPhoneやAndroidの他、ノートPCでもWi-Fiから現在位置を取得できる。iPhoneだとタイムアウトする?

GoogleMapper.getCurrentPosition(function(latLng) {
    // (略)
});

地名、駅名、施設名等から緯度経度を取得する(ジオコーディング)

GoogleMapper.search("静岡", function(response, status) {
    if (GoogleMapper.checkResponseStatus(status)) {
        var latLng = GoogleMapper.getGeocodeLatLng(response[0]);
        //(以下省略)
    }
});

緯度経度から住所を取得する(逆ジオコーディング)

GoogleMapper.searchByLatLng(latLng, function(response, status) {
    if (GoogleMapper.checkResponseStatus(status)) {
        var address = GoogleMapper.getGeocodeAddress(response[0]);
        //(以下省略)
    }
});

車または徒歩での道順案内を表示する

さらにストリートビューと合わせて見ると面白い。

var startFlg = false;
 
if (startFlg) { //スタート地点指定済みの場合
    startFlg = false;
    GoogleMapper.direct(latLng);
    return "";
}
 
startFlg = false;
 
var startRouting = function(mode) {
    GoogleMapper.mapClickable = false;
    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="startRouting(';
    h += 'google.maps.TravelMode.' + mode + ')" /> ';
}

日本列島の地図を表示した時にちょうどよいサイズの沖縄のミニ地図を画面右下よりに表示する

日本列島と一緒に沖縄も表示させたい。

GoogleMapper.showOkinawa([markers]); //あれば沖縄に表示するMarkerの配列を渡す

ソースコード

/**
 *  GoogleMapper V3 - (The Wrapper Class of Google Maps API V3)
 *  @see       http://0-oo.net/sbox/javascript/google-mapper-v3
 *  @version   0.7.1
 *  @copyright 2008-2015 dgbadmin@gmail.com
 *  @license   http://0-oo.net/pryn/MIT_license.txt (The MIT license)
 *
 *  See also Google Maps API V3 documents.
 *  @see https://developers.google.com/maps/documentation/javascript/reference
 */
var GoogleMapper = {
    /** Mapオブジェクト */
    map: null,
    /** マーカーの配列 */
    markers: [],
    /** 吹き出し */
    infoWindow: null,
    /** Mapをクリック可能か(beClickable()内でのmapのclickイベントの制御用) */
    mapClickable: false
};
/**
 *  Google Maps API V3のJavaScriptを読み込む
 *  @param  Function    callback    読み込み完了時に実行するCallback関数
 *  @param  String      libraries   (Optional) 追加ライブラリ(複数の場合はカンマ区切り)
 *  @param  Boolean     sensor      (Optional) 位置情報を使用するかどうか
 */
GoogleMapper.load = function(callback, libraries, sensor) {
    GoogleMapper._onload = callback;
 
    var params = [
        "callback=GoogleMapper._onload",
        "libraries=" + (libraries || ""),
        "sensor=" + (sensor || false)
    ];
 
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "//maps.googleapis.com/maps/api/js?" + params.join("&");
    document.getElementsByTagName("head")[0].appendChild(script);
};
/**
 *  地図を表示する(デフォルトは日本列島)
 *  @param  String  mapId   地図表示に使う要素(div等)のid属性
 *  @param  Number  lat     中心地点の緯度
 *  @param  Number  lng     中心地点の経度
 *  @param  Number  zoom    ズーム値
 *  @param  Object  options (Optional) Mapに渡すパラメータ
 *  @return Map
 *  @see https://developers.google.com/maps/documentation/javascript/reference#MapOptions
 */
GoogleMapper.show = function(mapId, lat, lng, zoom, options) {
    var params = {
        center: new google.maps.LatLng((lat || 38), (lng || 137.5)),
        zoom: (zoom || 5),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [   //コンビニ等、全ての情報を表示する
            { featureType: "all", elementType: "all", stylers: [{ visibility: "on" }] }
        ],
        scaleControl: true,
        overviewMapControl: true,
        overviewMapControlOptions: { opened: true }
    };
 
    for (var i in (options || {})) {
        params[i] = options[i];
    }
 
    GoogleMapper.map = new google.maps.Map(document.getElementById(mapId), params);
    GoogleMapper.infoWindow = new google.maps.InfoWindow();
 
    return GoogleMapper.map;
};
/**
 *  マーカーを追加する
 *  マーカーをクリックするとGoogleMapper.getMarkerInfo()の内容を吹き出しに表示する
 *  @param  Number or LatLng        lat     緯度 or LatLng
 *  @param  Number                  lng     経度(latにLatLngを渡す場合は不要)
 *  @param  String                  title   (Optional) ツールチップ表示する文字列
 *  @param  String or MarkerImage   image   (Optional) マーカー画像のURL or MarkerImage
 *  @return Marker  追加したマーカー
 *
 *  (参考)Google Maps用のマーカー画像の配布サイト
 *  @see https://mapicons.mapsmarker.com/
 */
GoogleMapper.addMarker = function(lat, lng, title, image) {
    var position = lat;
 
    if (lng) {
        position = new google.maps.LatLng(lat, lng);
    }
 
    var marker = new google.maps.Marker({
        map: GoogleMapper.map,
        position: position,
        title: (title || ""),
        icon: image
    });
 
    google.maps.event.addListener(marker, "click", function() {
        GoogleMapper.openMarkerWindow(marker);
    });
 
    GoogleMapper.markers.push(marker);
 
    return marker;
};
/**
 *  Google Chart APIを使ってマーカー画像を生成する
 *  @param  Number or LatLng    lat         緯度 or LatLng
 *  @param  Number              lng         経度(latにLatLngを渡す場合は不要)
 *  @param  String              title       (Optional) ツールチップ表示する文字列
 *  @param  String              bgColor     (Optional) 背景(塗り潰し)色(例:FFFFFF)
 *  @param  String              textColor   (Optional) 文字色(例:000000)
 *  @param  String              str         (Optional) マーカー上に表示する文字
 *  @return String or MarkerImage
 *  @see https://developers.google.com/chart/image/docs/gallery/dynamic_icons
 */
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 or LatLng    lat         緯度 or LatLng
 *  @param  Number              lng         経度(latにLatLngを渡す場合は不要)
 *  @param  String              str         吹き出しに表示する文字列
 *  @param  String              bgColor     (Optional) 背景(塗り潰し)色(例:FFFFFF)
 *  @param  String              textColor   (Optional) 文字色(例:000000)
 *  @param  String              style       (Optional) 吹き出し形状(尻尾無しは"bbT")
 *  @return String or MarkerImage
 *  @see https://developers.google.com/chart/image/docs/gallery/dynamic_icons
 */
GoogleMapper.addBubbleMarker = function(lat, lng, str, bgColor, textColor, style) {
    var type = "d_bubble_text_small";
    style = style || "bb";
    var icon = GoogleMapper._getIconURL(type, style, str, (bgColor || "FF0"), textColor);
 
    var iconY = -1, shadowY = -1;
 
    switch (style) {
        case "bb":      //左下に着地点
            iconY = 35;
            shadowY = 37;
            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 params = [style, encodeURIComponent(str || ""), bgColor, (textColor || "")];
 
    if (!style) {
        params.shift();
    }
 
    return "//chart.googleapis.com/chart?chst=" + iconType + "&chld=" + params.join("|");
};
/**
 *  マーカーのIndexを取得する
 *  @param  Marker  marker  Indexを調べたいマーカー
 *  @return Number  マーカーのIndex
 */
GoogleMapper.getMarkerIndex = function(marker) {
    var markers = GoogleMapper.markers;
 
    for (var i = 0, len = markers.length; i < len; i++) {
        if (markers[i] == marker) {
            return i;
        }
    }
};
/**
 *  マーカーを削除する
 *  @param  Number  index   削除するマーカーのIndex
 */
GoogleMapper.removeMarker = function(index) {
    GoogleMapper.markers[index].setMap(null);
    GoogleMapper.markers.splice(index, 1);
};
/**
 *  マーカーを全て削除する
 */
GoogleMapper.removeAllMarkers = function() {
    for (var i = 0, len = GoogleMapper.markers.length; i < len; i++) {
        GoogleMapper.markers[i].setMap(null);
    }
 
    GoogleMapper.markers = [];
};
/**
 *  マーカー上に吹き出しを表示する
 *  表示する内容はGoogleMapper.getMarkerInfo()から取得する
 *  @param  Marker  marker  吹き出しを表示するマーカー
 */
GoogleMapper.openMarkerWindow = function(marker) {
    GoogleMapper.openInfoWindow(GoogleMapper.getMarkerInfo(marker), null, marker);
};
/**
 *  吹き出しに表示する内容を作る(HTML可)
 *  表示したい内容がある場合、このfunctionを上書きする
 *  @param  Marker  marker  吹き出しを表示するマーカー
 */
GoogleMapper.getMarkerInfo = function(marker) {
    return GoogleMapper.escape(marker.title);
};
/**
 *  文字列のHTMLエスケープ
 *  @param  String  str
 *  @return String
 */
GoogleMapper.escape = function(str) {
    var rep = { "&": "&amp;", '"': "&quot;", "'": "&#039;", "<": "&lt;", ">": "&gt;" };
 
    return str.replace(/[&"'<>]/g, function(m) { return rep[m]; });
};
/**
 *  吹き出しを表示する(latLngとmarkerはどちらか一方を渡す)
 *  @param  String  content 吹き出しの中身のHTML
 *  @param  LatLng  latLng  (Optional) 吹き出しを表示する位置
 *  @param  Marker  marker  (Optional) 吹き出しを表示するマーカー
 */
GoogleMapper.openInfoWindow = function(content, latLng, marker) {
    if (!content) {
        return;
    }
 
    var infoWindow = GoogleMapper.infoWindow;
    infoWindow.setAnchor(null); //非公式APIでいったんクリア
    infoWindow.setOptions({ content: content, position: latLng });
    infoWindow.open(GoogleMapper.map, marker);
};
/**
 *  吹き出しを閉じる
 */
GoogleMapper.closeInfoWindow = function() {
    GoogleMapper.infoWindow.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  Function    onSuccess   位置取得時に実行するCallback関数
 *  @param  Function    onError     (Optional) 位置取得失敗時に実行するCallback関数
 *  @return Boolean     位置情報を取得可能かどうか
 *  @see http://dev.w3.org/geo/api/spec-source.html#api_description
 */
GoogleMapper.getCurrentPosition = function(onSuccess, onError) {
    if (!navigator.geolocation) {
        return false;
    }
 
    navigator.geolocation.getCurrentPosition(
        function(position) {
            var coords = position.coords;
            onSuccess(new google.maps.LatLng(coords.latitude, coords.longitude), coords);
        },
        onError || function(e) { alert(e.message); },
        { enableHighAccuracy: true, timeout: 10000 }
    );
 
    return true;
};
/**
 *  検索ボックスに入力補完機能を付ける(要Placesライブラリ)
 *  @param  String  inputId 検索ボックスのid
 */
GoogleMapper.setAutocomplete = function(inputId) {
    var ac = new google.maps.places.Autocomplete(document.getElementById(inputId));
    ac.bindTo("bounds", GoogleMapper.map);
};
/**
 *  地名や施設名等で検索する(ジオコーディング)
 *  @param  String      keywords    検索したいキーワード
 *  @param  Function    callback    (Optional) 検索結果が渡されるCallback関数
 *                                  渡されるのはGeocoderResponseの配列とGeocoderStatus
 *  @see https://developers.google.com/maps/documentation/javascript/reference#Geocoder
 */
GoogleMapper.search = function(keywords, callback) {
    if (!keywords) {
        return;
    }
 
    callback = callback || function(response, status) {
        if (!GoogleMapper.checkResponseStatus(status)) {
            return;
        }
 
        var len = response.length;
        var msg = len + "件ヒットしました\n";
 
        if (len == 1) {
            var map = GoogleMapper.map;
            var result = response[0];
            var latLng = GoogleMapper.getGeocodeLatLng(result);
            map.panTo(latLng);
 
            if (map.getZoom() < 14) {
                map.setZoom(14);
            }
 
            GoogleMapper.openInfoWindow(GoogleMapper.getGeocodeAddress(result), latLng);
            return;
        } else if (len < 20) {
            for (var i = 0; i < len; i++) {
                msg += "・" + GoogleMapper.getGeocodeAddress(response[i]) + "\n";
            }
        }
 
        alert(msg + "詳細な地名を追加してください");
    };
 
    (new google.maps.Geocoder()).geocode({ address: keywords }, callback);
};
/**
 *  緯度経度から地名を検索する(逆ジオコーディング)
 *  @param  LatLng      latLng      緯度経度
 *  @param  Function    callback    検索結果が渡されるCallback関数
 *                                  渡されるのはGeocoderResponseの配列とGeocoderStatus
 *  @see https://developers.google.com/maps/documentation/javascript/reference#Geocoder
 */
GoogleMapper.searchByLatLng = function(latLng, callback) {
    (new google.maps.Geocoder()).geocode({ latLng: latLng }, callback);
};
/**
 *  GeocoderStatusおよびPlacesServiceStatusをチェックする
 *  該当データなし以外のエラーの場合は、alert()を表示する
 *  @param  String  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から緯度経度を取り出す
 *  @param  GeocoderResponse    geocodeResult
 *  @return LatLng
 */
GoogleMapper.getGeocodeLatLng = function(geocodeResult) {
    return geocodeResult.geometry.location;
};
/**
 *  ある地点からある地点までの道順を表示する
 *  1度目に出発地点、2度目に目的地のlatLngを渡す
 *  @param  String / LatLng point   地名 or 緯度経度
 *  @param  String          mode    (Optional) 移動手段(省略すると車)
 *                                             TravelModeの定数のどれか
 *  @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.TravelMode.DRIVING),
        provideRouteAlternatives: true,
        unitSystem: google.maps.UnitSystem.METRIC
    };
 
    (new google.maps.DirectionsService()).route(request, function(response, status) {
        if (panel) {
            panel.innerHTML = "";
        }
 
        if (GoogleMapper.checkResponseStatus(status)) {
            renderer.setDirections(response);
        }
    });
};
/**
 *  ストリートビューを地図とは別に表示できるようにする
 *  @param  String  panelId ストリートビューを表示する場所(div等)のid属性
 */
GoogleMapper.setStreetView = function(panelId) {
    GoogleMapper.map.setStreetView(new google.maps.StreetViewPanorama(
        document.getElementById(panelId),
        { enableCloseButton: true, visible: false }
    ));
};
/**
 *  Google Placesに登録されているスポットを表示する(要Placesライブラリ)
 *  @param  Number  iconSize    (Optional) アイコンの表示サイズ
 *  @see https://developers.google.com/maps/documentation/javascript/places
 */
GoogleMapper.showPlaces = function(iconSize) {
    (new google.maps.places.PlacesService(GoogleMapper.map)).search(
        { bounds: GoogleMapper.map.getBounds() },   //取得対象範囲は表示中の地図
        function(results, status) {
            if (!GoogleMapper.checkResponseStatus(status)) {
                return;
            }
 
            GoogleMapper._places = GoogleMapper._places || {};
            iconSize = (iconSize || 24);
            var size = new google.maps.Size(iconSize, iconSize);
 
            for (var i = 0; i < results.length; i++) {
                var place = results[i];
 
                if (!GoogleMapper._places[place.id]) {
                    GoogleMapper.addPlace(place, size);
                    GoogleMapper._places[place.id] = true;
                }
            }
        }
    );
};
/**
 *  Google Placesのスポットをマーカーとして表示する
 *  @param  PlaceResult place   スポット情報
 *  @param  Size        size    アイコンサイズ
 */
GoogleMapper.addPlace = function(place, size) {
    var marker = new google.maps.Marker({
        map: GoogleMapper.map,
        position: place.geometry.location,
        title: place.name,
        icon: new google.maps.MarkerImage(place.icon, null, null, null, size)
    });
 
    //クリックされたら詳細ページへのリンクを表示する
    google.maps.event.addListener(marker, "click", function() {
        GoogleMapper.log(place.types.join());
 
        (new google.maps.places.PlacesService(GoogleMapper.map)).getDetails(
            { reference: place.reference },
            function(detail, status) {
                if (!GoogleMapper.checkResponseStatus(status)) {
                    return;
                }
 
                var h = GoogleMapper.escape;
                var url = h(detail.url.replace('com', 'co.jp'));    //日本語ページにする
                GoogleMapper.openInfoWindow(
                    '<a href="' + url + '" target="_blank">' + h(detail.name) + "</a>",
                    null,
                    marker
                );
            }
        );
    });
};
/**
 *  地図上に広告(Google AdSense)を表示する(要AdSenseライブラリ)
 *  @param  String          pubId       AdSenseアカウントのサイト運営者ID
 *  @param  AdFormat        format      (Optional) AdSenseの形状
 *  @param  ControlPosition position    (Optional) 地図上のどこに表示するか
 *  @param  String          channel     (Optional) AdSenseのチャネル番号
 *  @see https://developers.google.com/maps/documentation/javascript/advertising
 */
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 = "120px";   //Overview Map Controlの分だけ空ける
        outer.style.overflow = "hidden";
        outer.style.width = "113px";
        outer.style.height = outer.style.width;
        outer.style.border = "solid 0 #eee";
        outer.style.borderWidth = "6px 0 6px 6px";
 
        //実際に地図が載るところ
        var inner = outer.appendChild(document.createElement("div"));
        inner.style.height = "160px";
        inner.style.top = "-23px";
        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 = "-5px";
        closeBtn.style.right = 0;
        closeBtn.style.padding = "0 3px";
        closeBtn.style.backgroundColor = "#eee";
        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 duplicateMarker = 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", function() {
                GoogleMapper.openMarkerWindow(origin);
            });
        };
        for (var i = 0, len = markers.length; i < len; i++) {
            duplicateMarker(markers[i]);
        }
    });
};
/**
 *  consoleがある場合のみ、コンソールに出力する
 *  @param  Object  value
 */
GoogleMapper.log = function(value) {
    if (window.console && console.log) {
        console.log(value);
    }
};
/******************************************************************************
 *  使用例
 *  GoogleMapeer.demo("gmap", "route", "keywords");
 *  @param  String  mapId           地図を表示する場所(div等)のid属性
 *  @param  String  streetViewId    (Optional) ストリートビューを表示するdiv等のid属性
 *  @param  String  routerPanelId   (Optional) 道順を表示する場所(div等)のid属性
 *  @param  String  keywordInputId  (Optional) 検索用テキストボックスのid属性
 ******************************************************************************/
GoogleMapper.demo = function(mapId, streetViewId, routerPanelId, keywordInputId) {
    var demo = GoogleMapper.demo;
 
    //地図を表示(緯度経度ズームを渡さないと日本列島を表示する)
    var map = GoogleMapper.show(mapId);
 
    //マーカーを表示
    var tokyo = GoogleMapper.addMarker(35.7, 139.7, "東京");
    //マーカー上に吹き出しを表示
    GoogleMapper.openMarkerWindow(tokyo);
    //色の違うマーカーを表示
    GoogleMapper.addColorMarker(34.7, 135.5, "大阪", "FF0", "000", "虎");
    //吹き出し型のマーカーを表示
    var naha = GoogleMapper.addBubbleMarker(26.2, 127.7, "<那覇>");
 
    //沖縄のミニ地図を表示
    GoogleMapper.showOkinawa([naha]);
 
    //ストリートビューを地図とは別に表示できるようにする
    GoogleMapper.setStreetView(streetViewId);
 
    //地図上をクリック可能にする
    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 (demo.startFlg) {    //スタート地点指定済みの場合
            demo.startFlg = false;
            GoogleMapper.direct(latLng);
            return "";  //この場合は吹き出し表示なし
        }
        demo.startFlg = false;
        demo.startRouting = function(mode) {
            GoogleMapper.mapClickable = false;
            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.TravelMode.' + mode + ')" /> ';
        }
 
        return h;   //戻り値が吹き出しに表示される
    });
 
    //道順の終点はマーカーでもOKにする
    var getMarkerInfo = GoogleMapper.getMarkerInfo; //オリジナルを退避
    GoogleMapper.getMarkerInfo = function(marker) {
        if (demo.startFlg) {    //スタート地点指定済みの場合
            demo.startFlg = false;
            GoogleMapper.direct(marker.position);
            return "";
        }
        return getMarkerInfo(marker);
    };
 
    //検索キーワードの入力補完(要placesライブラリ)
    if (google.maps.places) {
        GoogleMapper.setAutocomplete(keywordInputId);
    }
 
    //地名や施設名等で検索する(ジオコーディング)
    var searchBox = document.getElementById(keywordInputId);
    demo.search = function() {
        GoogleMapper.search(searchBox.value);
        searchBox.focus();
    };
 
    //consoleがあれば、中心点とズーム値をコンソールに表示
    google.maps.event.addListener(map, "idle", function() {
        var center = map.getCenter();
        var latlng = "lat:" + center.lat() + ", lng:" + center.lng();
        GoogleMapper.log(latlng + ", zoom:" + map.getZoom());
    });
};
javascript/google-mapper-v3.txt · 最終更新: 2015/09/22 14:38 by dgbadmin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki