前回のエントリに続いて、GoogleMapの話です。

今回は、なんとなくGoogleMapAPI3.0+javascriptです。
keyが不要です。ひと手間省けます。と言っても差ほど手間でもありませんが、
とりあえず、ローカルでも普通に見られるだけでも、少しラクではあります。
まず、書き方が結構変わっていることに愕然として、心が折れそうになりつつも、ゴリゴリ書いてみた...

やりたい事は
・札幌の地下鉄・JR路線図をMAP上に表示させる事
・東西線、南北線などの表示を切り替えられる事
とりあえず、この辺り。

手っ取り早く、overlayLayerを使って画像を表示させてみた。
実装例はこちら
tozai.prototype = new google.maps.OverlayView();
tozai.prototype.draw = function() {
if (!this.div_) {
this.div_ = document.createElement( "div" );
this.div_.style.position = "absolute";
this.div_.innerHTML = "<img class='iepngfix' src='画像パス' width='画像幅' height='画像高さ'>";
var panes = this.getPanes();
panes.overlayLayer.appendChild( this.div_ );
}
var point = this.getProjection().fromLatLngToDivPixel( new google.maps.LatLng( this.lat_, this.lng_ ) );
this.div_.style.left = point.x + 'px';
this.div_.style.top = point.y + 'px';
}
tozai.prototype.remove = function() {
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
}
透過pngを使用したため、iepngfix.jsのお世話になりつつ、実装完了。
だけどこれだと、倍率分だけ画像も用意しなきゃいけないので、面倒だと気付き他の方法を試してみる。

そこでピンときたのが、polyline。
線を書いてしまって、各駅の上にマーカー画像でも表示させてあげれば、倍率も関係なく一発ジャン。
我ながら良い方法だと思いつつ、ゴリゴリ書いてみた...
実装例はこちら

◆マーカーの表示設定
var station_tozai = [
['新札幌', 43.03894801876874,141.47396206855774, 19],
～～～～中略～～～～
['宮の沢', 43.08999909195333,141.2772274017334, 1]
];

function setMarkers_tozai(map, locations) {
var image = new google.maps.MarkerImage('画像パス',new google.maps.Size(画像幅, 画像高さ),
new google.maps.Point(0,0),
new google.maps.Point(横オフセット量, 縦オフセット量));
for (var i = 0; i < locations.length; i++) {
var station_tozai = locations[i];
var myLatLng = new google.maps.LatLng(station_tozai[1], station_tozai[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: station_tozai[0],
zIndex: station_tozai[3]
});
}
}
◆polylineの表示設定
function initialize_tozai() {
var myOptions_tozai = {
zoom: 12,
center: new google.maps.LatLng(43.06046943023337,141.3545125722885),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
};
map = new google.maps.Map(document.getElementById("google-map"), myOptions_tozai);
setMarkers_tozai(map, station_tozai);
var tozai = [
new google.maps.LatLng(43.08999909195333,141.2772274017334),//miyanosawa_st
～～～～中略～～～～
new google.maps.LatLng(43.03894801876874,141.47396206855774)//shinsapporo_st
];
var flightPath = new google.maps.Polyline({
path: tozai,
strokeColor: "#FF6600",
strokeOpacity: 1.0,
strokeWeight: 4
});
flightPath.setMap(map);
}

◆html側の呼び出しタグ
<a href="javascript:void();" onclick="initialize_tozai()">地下鉄東西線</a>

これで実装完了...なのですが、お気付きの方もいらっしゃるでしょうが、polylineは直線しか絵画出来ません。
地下鉄など路線は意外とクネクネ曲がっています...
【polylineの表示設定】部分の【～～～～中略～～～～】には、恐ろしいまでの座標が書かれています...
東西線で290箇所...
南北線で162箇所...
東豊線で............心が折れました...
我ながらアホな思い付きでした...見た目はとてもキレイなのですが、心なしかコピペのし過ぎでCtrlキーが減ったようにすら見えます...
たぶん、おそらく誰もいないだろうとは思いますが、札幌市営地下鉄の東西線・南北線をpolylineで書こうと考えている方が
いらっしゃいましたら、どうぞ、ソースを持っていってください。
それで1mmでも苦労が報われるのなら、是幸いでございます。

そんなこんなで、しばらくは座標は見たくありません...

※このエントリに使われた3点リーダ（...）12回
※今回の作業で得た知識や、自分のアホさ加減　プライスレス

そんなこんなで、お問い合わせはこちら！
つっづっく！