カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

リンクでGoogleMap地図アプリを起動する

リンクを貼って指定した場所をGoogleMapの地図アプリで表示させることができます。
スマートフォン対応サイトや、メールで正確な場所を送りたいときに便利です。

メールで送る場合はURL部分だけでOKです。

※与える座標は世界測地系(WGS84)です。

<a href="http://maps.google.com/maps?q=35.65860811863414,139.7455318066551">地図を表示</a>

上記だと座標が名称として表示されるので、任意に名称を指定したい場合は以下のようにします。

<a href="http://maps.google.com/maps?q=35.65860811863414,139.7455318066551+東京タワー">地図を

表示</a>
14,322 views

現在のURLを取得 JavaScript

JavaScriptで、現在表示しているページのURLを取得します。

document.write(window.location.protocol + "//" + window.location.host + window.location.pathname + "<br>\n");
document.write(window.location.protocol + "//" + window.location.hostname + window.location.pathname + "<br>\n");
document.write(document.URL);

出力結果

http://www.sankikensetsu.co.jp/test.html
http://www.sankikensetsu.co.jp/test.html
http://www.sankikensetsu.co.jp/test.html
1,294 views

座標から住所を取得 GoogleMapAPI Geocoder

GoogleMap APIを利用して、座標から住所を取得します。

まず、座標オブジェクトを作成します。

location = new google.maps.LatLng([latitude], [longitude]);

ジオコーダーオブジェクトのインスタンスを生成

geocoder = new google.maps.Geocoder();

google.maps.Geocoderクラスのgeocodeメソッドでリクエストを送信し、返ってきたレスポンスを処理するコールバック関数を指定します。
複数の答えが返ってくる場合があるので、結果は配列になっています。

返ってきた結果のフォーマット済の文字列を取得する例

if(geocoder)
{
    geocoder.geocode(
        {location: location},
        function(geo_result, geo_response)
        {
            if(geo_response == "OK") {

                var tmpadd = "";
                tmpadd = geo_result[0].formatted_address;

                alert("住所:" + tmpadd);

            } else {

                alert(geo_response + "\n\n変換できませんでした。");

            }
        }
    );
}

続きを読む…»

7,660 views

GoogleMap ズームコントロール/移動コントロール

navigationControlが廃止され、zoomControlとpanControlに分割されています。

Zoom Control
zoomControl: true,
zoomControlOptions: {
    position: google.maps.ControlPosition.TOP_LEFT, // TOP_RIGHT, LEFT_CENTER, RIGHT_CENTER, TOP_LEFT, BOTTOM_LEFT
    style: google.maps.ZoomControlStyle.DEFAULT     // DEFAULT, SMALL, LARGE
}

ZoomControlStyleはDEFAULTにしておくと表示サイズや端末に合わせて最適化してくれます。

Pan Control
panControl: true,
panControlOptions: {
    position: google.maps.ControlPosition.TOP_LEFT // TOP_RIGHT, LEFT_CENTER, RIGHT_CENTER, TOP_LEFT, BOTTOM_LEFT
}
2,116 views

ルート検索 最適経路

営業の仕事をしていると、複数の場所を効率よく回りたい、という要求が出てくるかと思います。
GoogleMap APIを利用すれば出発地点、到着地点、8ヶ所の経由地を指定し、効率よく回るルートを検索することができます。
所謂巡回セールスマン問題を踏まえた結果を返してくれます。
その際はリクエストプロパティの「optimizeWaypoints」にtrueを設定しておきます。

しかし、経由地8ヶ所以上の検索はできません。
費用が発生してよいならば、23ヶ所まで検索できるようです。
では、費用をかけずに8ヶ所以上検索したい場合はどうしたらよいでしょうか?

どうにか自前でできないかと色々調べました。
巡回セールスマン問題、組み合わせ最適化、パス表現法、ナップサック問題、欲張り法、遺伝的アルゴリズム等々。

巡回セールスマン問題、組み合わせ最適化を踏まえた最適ルートの検索で、何通りのルートを計測すればいいかと言いますと、以下の通り

n!/2n

nを10とすると(10×9×8×7×6×5×4×3×2×1)÷(2×10)で181,440通りとなります。

更にnが増加すると莫大な計算量になってしまうので、日常のプログラムとして使用するには
現実的ではありませんし、スーパーコンピューターでも100億年かかるという計算量になってしまいます。

…無理です。。。

何か打開策はないかと、物理の仕事(仕事率)も応用してみようと試みましたが、力(N)に当たるものが
ないので、比較する値としては単純な速さとなってしまうので最適な結果は得られず断念。

最終的に、遺伝的アルゴリズムを見ていると、ルートをランダムに作成するしかないのか、
という結論に至り、研究は終了しました。

というわけで、PHPとJavaScriptを使いプログラムを作成しました。

続きを読む…»

9,008 views