GoogleMap(v3)にて、複数追加したマーカーが
全て表示されるように位置と拡大比率を自動調整する機能があります。

以下のメソッドを使います。
google.maps.Map::fitBounds(bounds:LatLngBounds)

マップオブジェクトを生成します。

var map = new google.maps.Map(document.getElementById("map"));

表示領域を生成します。

var bounds = new google.maps.LatLngBounds();

表示領域にマーカーの位置を追加

bounds.extend(new google.maps.LatLng(35.705506, 139.752048)); //東京ドーム
bounds.extend(new google.maps.LatLng(35.633232, 139.882006)); //東京ディズニーランド
bounds.extend(new google.maps.LatLng(35.710349, 139.811346)); //東京スカイツリー

表示領域を地図に反映させます。

map.fitBounds (bounds);

リンクを貼って指定した場所を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>

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

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変換できませんでした。");

            }
        }
    );
}

続きを読む…»

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
}