Google MapsとBing Mapsを使い比べる #1【1日目】
最近、二つのマップサービスをそれぞれ触る機会があったので、機能の比較を交えつつ、最終的にちょっとしたアプリケーションを作るところまで仕上げたいと思います。第一回では、準備からマップとピンを表示するところまで進みます。
準備
Google Mapsは、特になんの準備もなく使い始める事ができます。Bing Mapsについても同様ですが、後者はWindows Live IDとMaps Developer Accountを取得し、発行されるキーをコード内に記述しないと、マップ表示時に資格情報が無い旨のメッセージが中央に大きく表示されてしまいます。利用許諾条件については、それぞれよく確認してください。
リファレンスなど
どちらのマップも、オンラインでチュートリアルやリファレンスが確認できます。
Google Mapsに関しては、一部日本語化されています。Bing Mapsは今のところ全て英語です。どちらも、機能の実際の動きを確認したり、サンプルコードを改変して動きを試したりするためのサイトが用意されています。
ちなみに、Code PlaygroundはGoogle Mapsだけではなく、Googleの提供している様々なサービスが試せます。Interactive SDKについてはBing Maps専用です。
Map APIの読み込み
Google Maps
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=[true or false]"></script>
GPSセンサーを使用するかどうかを引数で指定します。この指定は必須です。
Bing Maps
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=[ja-jp en-us etc...]"></script>
言語を引数で指定します。Google Mapsはブラウザの設定を読んで自動的に言語を判定するようですが、Bing Mapsは無指定だと英語になります。
早速マップを出してみる
まずはHTMLの準備をします。どちらも、DIVなどの要素を指定して、その領域にマップを表示てみします。
Google Mapsに関しては、DIV領域の高さを明示的に指定しておかないと何も表示されないので注意してください。
ブラウザの全画面にマップを表示する場合の例を以下に示します。
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
#myMap {
width: 100%;
height: 100%;
}
</style>
<body> <div id="myMap"> </div> </body>
Google Maps
var latlng = new google.maps.LatLng(35.697239, 139.774719);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("myMap"), myOptions);
Bing Maps
var latlng = new Microsoft.Maps.Location(35.697239, 139.774719);
var mapOptions = {
zoom: 16,
center: latlng,
credentials: 'your key'
};
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), mapOptions);
最小限のオプション指定でマップを表示するだけに限れば、どちらもほぼ同じです。zoom値に関しても、同じ数字にすると、同じ縮尺になるようでした。
今回の例では違いは以下の二点です。Google Mapsは、mapTypeIdの指定が必須になっています。一方、Bing Mapsには前述の通り、credentialsにキーを指定する必要があります。
マップを全画面ではなく特定領域にのみ表示したい場合、Bing Mapsでは注意が必要です。Google Mapsでは、Mapのコンストラクタで指定した対象要素のサイズに合わせてその中にマップが描画されますが、Bing Mapsはコンストラクタのオプションでサイズを指定しなかった場合、対象要素のサイズを無視して全画面にマップが描画されてしまいます。CSSとJSでそれぞれサイズを指定しなければならないので、二度手間です。
ピンを立ててみる
次はマップ上にピンを立てます。ピンは、Google MapsではMarker、Bing MapsではPushpinと呼ばれます。
Google Maps
var markerOptions = {
position: map.getCenter(),
icon: 'logo.png',
map: map
};
var marker = new google.maps.Marker(markerOptions);
//除去
marker.setMap(null);
//再度表示
marker.setMap(map);
Bing Maps
var pushpinOptions = {
icon: 'logo.png',
width: 40,
height: 40
};
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions);
map.entities.push(pushpin);
//除去
map.entities.remove(pushpin);
//再度表示
map.entities.push(pushpin);
アイコンを指定しない場合、各マップで用意されている標準のピンが立ちます。今回は画像をピンのアイコンとして使用してみました。
まずオプションですが、Google Mapsは、画像のサイズを見て自動的にピンのサイズや基準点（下部中央）をあわせてくれます。一方、Bing Mapsは、明示的にサイズを指定しないとうまくいきません。
Google MapsのMarkerは、画像を直接アイコンとして使う以外にも、ベクターでアイコンを描画したり、アイコンと影を別々に指定したり等、外観に関しては多くの設定項目を持ちます。Bing Mapsは、画像とHTMLが使用出来ます。ピンのお手軽さやカスタマイズ性においては、Google Mapsの方がBing Mapsよりやや優れていると言えそうです。
ピンをマップに立てる方法については、両者まったく考え方が異なります。Google MapsはMarkerが主体で、Markerに対して対象のMapを設定しますが、Bing Mapsでは、PushpinをMapのentitiesに追加することで、そのMap上に配置されます。個人的には、Bing Mapsの方が馴染みやすい感じがします。
まとめ
ここまでの内容でマップを描画したサンプルを以下に載せておきます
Google Maps
(function() {
var latlng = new google.maps.LatLng(35.697239, 139.774719);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMapsDiv"), myOptions);
var markerOptions = {
position: map.getCenter(),
icon: 'logo.png',
map: map
};
var marker = new google.maps.Marker(markerOptions);
})()
Bing Maps
(function() {
var latlng = new Microsoft.Maps.Location(35.697239, 139.774719);
var mapOptions = {
zoom: 16,
center: latlng,
credentials: '*****************************************',
width: 400,
height: 400
};
var map = new Microsoft.Maps.Map(document.getElementById('bingMapsDiv'), mapOptions);
var pushpinOptions = {
icon: 'logo.png',
width: 40,
height: 40};
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions);
map.entities.push(pushpin);
})()
次回は、イベント処理、吹き出し、図形描画について解説します。
![[Transcribe] 動画内でしゃべった言葉をテキスト検索可能にする](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-cd051e80347b7e8a807fef242f24e718/ccaa2ddf9bcf8223013f2ee1cc04ed9a/amazon-transcribe)
![[Bun] JavaScriptでC言語のファイルを簡単に実行する](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-8c6d505db5519c426a9f992bfb37e1a0/753887f068b49792ca4f521aa8f565dd/eyecatch_bun_1200x630.png)
