このサンプルは、Google Maps v3のAPIを利用してマップ上にガソリンスタンドの最安価格ベスト５を表示します。サンプルの左側にマップ、右側のサイドバーにはガソリンスタンドのベスト５が表示されます。マップ上のマーカーにマウスを移動すると、マーカーの色が「赤」から「オレンジ」に変わります。マーカーをクリックすると、情報ウィンドウ（吹き出し）にガソリンスタンド名、住所、価格が表示されます。右側のサイドバーに表示されているリンクをクリックすると、対応するマーカーの情報ウィンドウが表示されます。
このサンプルは、ガソリンスタンドの情報をXMLファイル(gasPrices.xml)から取得して表示します。本番で利用するときは、ガソリン価格比較サイトからガソリンスタンドの情報を取得します。
$.get('ajax/googleMap3/gasPrices.xml', {}, function(data) {
var anchors = '';
var bounds = new google.maps.LatLngBounds();
$(data).find('marker').each(function(i) {
var $marker = $(this);
var point = new google.maps.LatLng(
parseFloat($marker.attr('lat')), parseFloat($marker.attr('lng')));
var title = $marker.attr('title');
var address = $marker.attr('address');
var price = $marker.attr('price');
var rank = parseInt($marker.attr('rank'));
var html = '<div style="font-size:12px"><b>' + title + '</b><br />'
+ address + '<br /><span style="color:red; font-weight:bold; font-size:18px;">' + price + '</span></div>';
var marker = createMarker(map, point, title, html, rank);
mapMarkers.push(marker);
mapHTMLS.push(html);
bounds.extend(point);
anchors += '<a href="javascript:markerClicked(' + i + ')">' + rank + ') ' + title + '</a><br /><br />';
}); // end of each()
$('#sidebarDiv').html(anchors);
map.fitBounds(bounds);
map.setCenter(bounds.getCenter());
});
このサンプルを作成するには、以下の書籍を参照してください。