2011年2月24日

GoogleMap API V3 その2

GoogleMapAPIもV3になってから簡単になりました。


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

って読み込むだけですね。

以下の部分でルート検索、標高用のグラフの初期化をしています


<script type="text/javascript">
  var map = null;
  var chart = null;

  var geocoderService = null;
  var elevationService = null;
  var directionsService = null;

  var mousemarker = null;
  var markers = [];
  var polyline = null;
  var elevations = null;

  var SAMPLES = 256;

 var examples = [{
    // Lombard St
    latlngs: [
      [37.801000, -122.426499],
      [37.802051, -122.419418],
      [37.802729, -122.413989]
    ],
    mapType: google.maps.MapTypeId.ROADMAP,
    travelMode: 'driving'
  },{
    // Mount Everest
    latlngs: [
      [27.973323, 86.908035],
      [28.020614, 86.960906]
    ],
    mapType: google.maps.MapTypeId.TERRAIN,
    travelMode: 'direct'
  }];

SAMPLESというのは標高表示グラフの解像度になります。数値を大きくすると細かいグラフになりますし、小さくすると荒いグラフになります。ただ、Google Elevation APIで512までに制限されているようです。

このケースだと、examplesという配列に緯度・経度の情報、地図のタイプ、移動方法の選択をします。

mapTypeはROADMAPを選択し、travelModeはwalkingあたりを選択しておけば問題ないと思います。で、上から順番にexamples[0],examples[1]という配列になり、後でルートを選択する場合にはその番号を使用します。

今回は基本的にサンプルのjavascriptをとりあえずはそのまま使用します。

GoogleMap API V3 その1

今回は管理、運用している別サイトの話。

京都府民総合体育大会市町村対抗駅伝 のホームページを管理しています。

その中でコース紹介のページを作っているのですが、面倒でPDFファイルを貼り付けていただけなのでうすが、どうも面白くないので、GoogleMapAPIのルート案内を使ってみることにしました。

ただ、単にルート案内だけを導入しても面白くない。

そこで、Google先生に聞いてみますと、高低差表示ができるページが紹介されていましたので、さっそくそちらの高低差表示も含めたコース紹介を導入することにしました。

実は、当初はGoogleMapAPIのルート案内ではなく、Yahoo!のルートラボを使用しようと考えていたのですが、ホームページに貼り付けたときにどうも他のページとの整合性が取りにくく、細かいカスタマイズができない。で、結局GoogleMapAPIを使って地図を貼り付ける形に落ち着きました。

で、再度Google先生にお伺いしたところ、http://gmaps-samples-v3.googlecode.com/svn/trunk/elevation/elevation-profile.htmlなるページがヒットしました。

ソースを見る限り、それほど複雑な仕組みにはなっていないようですので、解析しながらおいおい設置したいと思います。

2011年2月20日

デザイン改造 その3

今回はデザイン改造というよりも機能の追加。

カレンダーを表示させせたいと思います。

いつもお世話になっている小粋空間さんにmt4にajaxカレンダーを表示させるという記事がありますので、いつものようにそのまま活用させていただきます。

今回はAjax 月送りカレンダー(MT4版)ってのを試してみます。

全ては小粋空間さんの記事のとおりなので、手順通り進めれば何事もなかったかのようにちゃんとカレンダーが表示されました。

さすがですね。

それと、今回はアクセスカウンタを追加しました。

画像タイプのアクセスカウンタだとフリーのものも出回っているので、案外簡単に設置できるのですが、個人的に画像タイプのアクセスカウンタは好きではありません。

結局、phpで適当なスクリプトを組んで設置することにしました。

悪戦苦闘の末、なんとか完成しました。

と思っていたのですが、やはり落とし穴が...。

mt-search.cgiで検索結果を表示させると、アクセスカウンタのphpスクリプトがそのまま表示されてしまう!?

シロートの私には対処方法は今のところ分かりません。

とりあえずの対処法は、アクセスカウンタを消す!ことしかできませんので、とりあえず設置を取りやめ、google先生と相談中です、トホホ。