GoogleのGoogleMap APIを使ってルート検索をすることができます。

まず、ルート検索のプロパティを指定します。

// Route Request Property
var request = {
    origin: null,            // 出発地点のLatLngオブジェクト
    destination: null,       // 到着地点のLatLngオブジェクト
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    avoidHighways: true, // true に設定すると、高速道路を可能な限りルートの計算から除外するように指定されます。（省略可能）
    avoidTolls: true     // true に設定すると、有料道路を可能な限りルートの計算から除外するように指定されます。（省略可能）
};

トラベルモードについては

DRIVING=自動車
BICYCLING=自転車
TRANSIT=電車
WALKING=徒歩

出発地点と到着地点を設定します。

request.origin      = new google.maps.LatLng(34.73307796637832, 135.49859046936035);  //新大阪駅
request.destination = new google.maps.LatLng(35.681003987351055, 139.76703643798828); //東京駅

DirectionsServiceのインスタンスを生成

var directionsService = new google.maps.DirectionsService();

ルート表示のオブジェクトを作成し、プロパティを設定します。 続きを読む…»

グーグルストリートビューで、指定した座標が建物上だったり、ストリートビューが提供されていない場所だった場合、そこから一番近い場所のストリートビューを表示する方法があります。

GoogleMap APIのバージョンが異なると書き方が違ってくるので、その違いを紹介。

JavaScriptのクラスとして定義しています。

バージョン2の場合、以下のようにしていました。

var stViewClass = {

    panoramaOptions: {
        latlng: new GLatLng({緯度}, {経度}),
        pov: {
            heading: 0,
            pitch: 0,
            zoom: 1
        }
    },

    makeStreetView: function(id)
    {
        stPanorama = new GStreetViewPanorama(document.getElementById(id), this.panoramaOptions);

        stClient = new GStreetviewClient();
        stClient.getNearestPanoramaLatLng(this.panoramaOptions.position, function(latlng) {
            if (latlng != null)
            {
                stPanorama.setLocationAndPOV(latlng);
            }
        });
    }

}

バージョン3の場合、以下のような記述になります。 続きを読む…»

汎用性のあるロールオーバーを作成します。

例として閉じるボタンを作成します。
画像は、「close.gif」と「close_mo.gif」を用意します。

img要素にname属性を指定しておきます。
これを利用して画像の置き換えを行います。

名前付けの注意点として、予約語は避けます。
例えばここでいう閉じるボタンにname="close"とすると正常に動作しません。

<a href="javascript: window.close();"><img name="close_button" src="close.gif" alt="閉じる" onmouseover="swap_image(this.name, this.src);" onmouseout="swap_image(this.name, this.src);"></a>

次に画像を入れ替えるJavaScript

function swap_image(name, src)
{
	var extension, toSrc, newImage;

	if(src.indexOf("_mo") != -1)
	{
		toSrc = src.replace("_mo.", ".");
	}
	else
	{
		extension = src.substr(src.length - 3);

		toSrc = src.replace("." + extension, "_mo." + extension);
	}

	newImage = new Image();
	newImage.src = toSrc;

	eval("document."+name+".src = '"+newImage.src+"';");
}

これだけでも一応完成ですが、ボタン画像を新しくした場合等 続きを読む…»

Ajaxを使用して通信し、得た結果を処理するときの注意点。

サーバーサイドでオブジェクト等を生成して返し、それをeval処理する際、
無効な改行が含まれるとエラーが発生することがあります。

具体的には「終了していない文字列型の定数です。」とスクリプトエラーが発生してしまいます。

例えば、PHPで単純に以下のようなデータを出力するとします。

echo "var a = \"文字列\";";

それをJavaScriptでeval処理すると

eval(responseText);
alert(a);

「文字列」というアラートが表示される。
続きを読む…»

スマートフォンサイトを表示させた時に、ブラウザのアドレスバーを見えなくするには
読み込み時に画面を1ピクセルだけスクロールさせることで実現できるようです。
実行はsetTimeoutを使って少し遅らせます。

window.onload = function()
{
    setTimeout("scrollTo(0, 1)", 100);
}