投稿者: Tomotoshi Sugishita
2010年11月24日 20:36
うちの会社のサイトの地図表示では、Google マップ を使用しておりますが、せっかく MS系テクノロジ開発を生業としているので、たまには Bing Maps も使用してみようということで調べ始めたところ、Silverlightがどうだとか、Ajax Control だとか、Maps Appがなんだかんだと、小難しくてめんどくさいネタばかりでフツーな情報がほぼ皆無。
Google マップとか Yahoo! マップとかみたいにJSでフツーに地図表示してフツーにピンを立てたいだけなのにさ。
こんな情報ばかりに埋もれちゃっては、だれも使わないよー。Silverlight版をみんな使いたいわけじゃないでしょ。（個人的におもしろいのはおもしろいんだけどさ）
ということで、サンプル。（エラー処理とか一切入れてませんので、あしからず）
(前、省略)
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
<script type="text/javascript"><!--
$(function() {
var location = new VELatLong(36.053321, 136.515609); //地図の座標
var map = new VEMap("myMap");
map.SetCredentials("http://www.bingmapsportal.com/ でBing Maps Key を取得");
map.LoadMap();
map.SetCenterAndZoom(location, 14); //指定座標へのセンタリングとズームの指定
var shape = new VEShape(VEShapeType.Pushpin, location); // ピンを指定座標に設定
map.AddShape(shape); // ピンを立てる
});
//-->
</script>
</head>
<body>
<div id="myMap" style="position:relative; width:550px; height:500px;"></div>
</body>
</html>
こんなもんですよ。表示例はこちら
MSDNライブラリのMaps Key による認証チェックを行うなら、mapオブジェクトのAttachEventメソッドで oncredentialerror にイベントハンドラを割り当てれば良いです。
http://msdn.microsoft.com/ja-jp/library/ee692182.aspx
今現状は、Bing Maps Key を使ってSetCredentialsをしなくても使用できましたが、うーむ・・・。
フィード