皇居ランナーズマップを作成しました

皇居ランナーズマップ画像

もう大分前になりますが、学校の卒業制作として皇居ランナーズマップというサイトを作成しました。
復習も兼ねて主にjavascriptなど技術面の解説を書いておきます。

そもそもランニングなど全くしない僕ですが、社会人になった友人がやたら皇居ラン皇居ランと言うものですから、そんなに流行ってんのかと思って検索してみたら意外とコース周辺の情報があまり見当たりませんでした。

千代田区の観光協会などがコース情報を出していたのですがもう少し地図上でわかりやすくできたら面白いんじゃないかなーと思って、卒業制作のテーマにしてみました。

まずは使いやすいGooglemapをAPIで利用して情報を表示して、自分の調べたい目線からコースの情報を探せるサイトにしようと決めGooglemapAPIのver3を勉強しました。

基本的にはコピペとプラグインの合わせ技で大半が構成されていますので、まだまだ至らない部分が多いです。。。

まずはGooglemapの表示

//表示するHTML要素を指定
var mapdiv = document.getElementById("map_canvas");

//地図の設定
var myOptions = {
//初期表示の拡大率
zoom: 14,
//初期表示中心点の設定
center: new google.maps.LatLng(35.685366,139.753),
//地図タイプ
mapTypeId: google.maps.MapTypeId.ROADMAP,

//コントローラーの設定
//拡大縮小率
scaleControl: true,
//ナビゲーションコントローラー
navigationControl: true,

//地図を表示
map = new google.maps.Map(mapdiv, myOptions);

地図の設定の部分は他にもいろいろメソッドがあるので公式のリファレンスのMapOptions オブジェクトの仕様のところを参照してください。

ルートの表示

そんでもってコースとなる部分を青い線で引くためにAPIのルート計算を使いました。

var directionDisplay;
//DirectionsServiceを準備
var directionsService = new google.maps.DirectionsService();

//ルートの作成

//ルートのスタート位置の緯度・経度
var start = new google.maps.LatLng(35.678011,139.755618);

//ルートのゴール位置の緯度・経度
var end = new google.maps.LatLng(35.678011,139.755618);

//ルートの通過地点位置の緯度・経度
var waypts = [{
location:new google.maps.LatLng(35.679604,139.757443)
},{
location:new google.maps.LatLng(35.685323,139.760803)
},{
location:new google.maps.LatLng(35.690582,139.75625)
},{
location:new google.maps.LatLng(35.687922,139.745289)
},{
location:new google.maps.LatLng(35.683476,139.744307)
}];

//ルート検索オプション
var request = {
//開始位置
origin:start,
//終着位置
destination:end,
//通過ポイント
waypoints:waypts,
//移動手段(徒歩)※日本はまだ徒歩しか対応していない(2011年3月時点)
travelMode:google.maps.DirectionsTravelMode.WALKING
};

//ルートを計算
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
//計算したデータを格納
directionsDisplay.setDirections(result);
}

});

//ルートを表す線の表示設定
var poloption = {
clickable: false,
strokeColor: "#6cf",
strokeWeight: 7,
strokeOpacity: "0.7",
}

//ルートを表示する準備
directionsDisplay = new google.maps.DirectionsRenderer();

//マーカーの非表示
directionsDisplay.suppressMarkers = true;

//線の設定を適応
directionsDisplay.polylineOptions = poloption;

//中心が変わらないようにする
directionsDisplay.preserveViewport = true;

//ルートを表示
directionsDisplay.setMap(map);

情報の読み込みと表示

地図上に載せる情報はxml形式で書きました。

投稿型のサービスでは無いですし、そこまで情報量も多くなかったので。

(決してデータベースを用意するのがめnゲフンゲフン・・・)

そこに施設名や緯度・経度などを書いておいて、jQueryで読み込みを行い、情報ウィンドウや詳細情報をHTMLの情報に変換します。

それをマーカーや下に表示するサムネイルのロールオーバー時やクリック時に表示させるように設定します。

//xml情報を読み込み
$.ajax({
//読み込むファイル
url: xml_url,
type: "GET",
//読み込むファイルの形式
dataType: "xml",
timeout: 3000,
//読み込みが失敗した場合の処理
error:function(){
alert("xmlファイルの読み込みに失敗しました");
},
//読み込みが成功した場合の処理
success: function (xml){
$(xml).find("marker").each(function(){
var popimg = $("img",this).text();
var LocateLat = $("lat",this).text();
var LocateLng = $("lng",this).text();
var LocateTitle = $("title",this).text();
var Locateicon = $("icon",this).text();
var LocateName = "ここに取り出した情報を入れるHTMLを書く";

//マーカーをセット
MarkerSet(LocateLat,LocateLng,LocateName,LocateTitle,Locateicon);

//リストに対応するマーカー配列を設置
var marker_num = marker_ary.length - 1;
listset(popimg,LocateTitle,marker_ary[marker_num]);
});

},

});

//読み込んだxml情報からマーカーをセットします
function MarkerSet(lat,lng,text,title,icon){
var marker_num = marker_ary.length;
//マーカーの位置情報
var marker_position = new google.maps.LatLng(lat,lng);
//マーカーオプション
var markerOpts = {
map: map,
icon: icon,
shadow:shadow,
animation: google.maps.Animation.DROP,
position: marker_position

};
//マーカーのアニメーション設定
setAnimation = {
bounce:10,
drop:10
};

//マーカーを設置
marker_ary[marker_num] = new google.maps.Marker(markerOpts);

marker_ary[marker_num].setMap(map);

//textが渡されていたら情報ウィンドウを生成
if(text.length>0){

var infoWndOpts = {
content :title,
};
//新しい情報ウィンドウ
var infowindow = new google.maps.InfoWindow(infoWndOpts);

//マーカーのクリックイベントを設定
google.maps.event.addListener(marker_ary[marker_num], "click", function(){
//詳細情報を表示
$("#markerinfo").html(text);
$('#markerinfo').fadeIn();

//画面外をクリックしたら詳細情報画面を消す設定
$(".popup").bind("click",function(){
$('#markerinfo').fadeOut();
});

});

//マーカーのロールオーバー時に情報ウィンドウを表示
google.maps.event.addListener(marker_ary[marker_num], "mouseover", function(){
infowindow.open(map, marker_ary[marker_num]);
});

//マーカーをクリックすると詳細情報を表示
google.maps.event.addListener(marker_ary[marker_num], "mouseout", function(){
infowindow.close(map, marker_ary[marker_num]);
});
}
}

//読み込んだxml情報からサムネイルを抜き出して表示、マーカーと連動させる
function listset(list_img,list_title,list_num){
//liタグにaタグをセット
loc = $("<li><a href=javascript:void(0)><img src='"+ list_img +"' alt='" + list_title + "' width='90' height='60' /></a></li>");
//セットしたタグにイベントマーカーがクリックされた時のイベントを設定
loc.bind('click', function(){
google.maps.event.trigger(list_num, 'click');
});
//同じくロールオーバー時のイベントを設定
loc.bind('mouseover', function(){
google.maps.event.trigger(list_num, 'mouseover');
});
loc.bind('mouseout', function(){
google.maps.event.trigger(list_num, 'mouseout');
});
//サムネイルを表示
$('#listthum ul').append(loc);
$('#listthum ul').hide();
$('#listthum ul').fadeIn("slow");
}

ここの最後で使ったbind()とtrigge()が便利で目からウロコでした。

jQueryなかったら僕なんもできない・・・

マーカーのリセット

後はマーカーの切り替え時に既に表示中のマーカーを削除するためのスクリプトを入れて、切り替えの度に実行させてます。

//表示中のマーカーがあれば削除
if(marker_ary.length > 0){
//マーカー削除
for (i = 0; i <  marker_ary.length; i++) {
marker_ary[i].setMap();
}
//配列削除
for (i = 0; i <=  marker_ary.length; i++) {
marker_ary.shift();
}

//サムネイルを削除
$("#listthum ul li").remove();
}

大体こんなもんでした。あんま複雑なことはしてません。

そのほか

ちなみにグルメ情報はlivedoorグルメのAPIサービスから取得してます。

json形式で取得できるのでそのまま上記のスクリプトに送って同じようにマーカーとして表示できます。

緯度経度の情報もGooglemapと同じ方式なのでズレもほとんどありません。

ぐるなびAPIは緯度経度が日本式なのでGooglemapで正確に表示するのは計算し直さなくてはならず正確な位置情報を取得するのが難しいのと、サムネイルに使う画像がヒドイ状態のモノが多かったので使用しませんでした。

こんな感じでAPIの取得部分はPHPを使用していますが、基本はほとんどxmlとjavascriptで構成しています。

ただ正直動作が不安定な部分も多くデータベースとかで必要な情報だけを読み込むとかにした方が安定するのかなぁとか思います。

無駄な処理が多すぎるんだろうな・・・

それでもAjaxとGooglemapを使用したマッシュアップサイトを作るため基礎を勉強するには非常によかったと思います。

一応一年勉強してきたの技術を圧縮できたサイトにはなったかなと・・・

参考サイト

サイトを作るにあたって主に参考にしたのは次の3つのサイトです。

ビジネスマンの徹底パソコン奮闘サイト

気ままにWeb

WordPressにGoogle Maps API!ブログ素人のホームページの作成メモ

どのサイトも非常に詳しく書かれていて、サンプルも豊富でしたので凄くお世話になりました。

こうやってアウトプットしていただける人達に感謝です。

後はもちろん公式のリファレンス

これからも精進して制作活動に精を出していたいと思います。

COMMENTS

  • http://pgdpolska.com.pl/logistyka-transportu.html
    Purchasing a used or new automobile can be quite a hard method should you not know what you are actually performing. By educating yourself about automobile purchasing before you visit the car dealership, you could make issues less difficult yourself. The following tips might help the next buying getaway be pleasant.

    Usually take a mechanic together when looking for a new car. Automobile merchants are well known for offering lemons and you may not want to be their up coming target. Whenever you can not have a auto mechanic to consider automobiles along, no less than make sure that you have him review your closing decision before you buy it.

    Know your boundaries. Before you start store shopping for your next automobile or vehicle, make a decision what you can manage to pay, and follow it. Don’t overlook to include interest in your calculations. You can expect to shell out about twenty percent as an advance payment too, so be prepared.

    Prior to attending a dealership, know which kind of motor vehicle you need. Research most of you choices ahead of purchasing to help you evaluate which works for your budget and family demands. Do your research to discover how much you must pay for a potential auto.

    Before signing any contract spend some time to read through each range, for example the fine print. If you have nearly anything outlined that you do not fully grasp, tend not to indication before you purchase an respond to that you simply understand. Unsavory salesmen can make use of a binding agreement to put in numerous fees that had been not discussed.

    In the event you maintain the preceding assistance at heart when that you simply go shopping for a automobile, you will end up more likely to obtain a good deal. Investing in a vehicle lacks as a frustration. Use the information out of this report and you will have the car you want at a very good value.

    02/11 7:58 | MilkHinchWar55v

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Pagetop

Copyright© echolabo All rights reserved.