ねこでもわかるプログラムとか

Google Maps JavaScript APIとか

2015/10/14 18:39:37

数日前までIE6で『ねこのニジマス』の地図表示できてたのに、

表示できなくなってるぅぅぅううううう^q^

Noranekoさんです。

本家のマップが改悪されて、検索結果の左ペインがうざくなったり、

POIをクリックした時に地図の中央に来なくなったので、

URLから緯度経度が取れなくなったり

ほんと余計なことするなよ…

無駄な情報を出したいなら、最初の時みたいに左ペイン固定にしとけよ…

と言うわけで、Google Maps JavaScript API

を使用したカスタマイズをちょっとだけ説明します。

今回、地図をオレ色にしたいと思って、SNAZZY MAPSからAvocado Worldを拝借して、

更に自分好みにカスタマイズしました。

ソースを見てもらうと

var option = {
zoom: 8,
center: new google.maps.LatLng(36.343103, 138.863238),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles:[{"featureType":"landscape", bla bla bal... }]
};

という地図の初期化のstylesの部分がデザインになります。

Avocado Worldでは、

{"color":"#abce83"}

という風に色指定をしています。

これにすると、山や海などが一色でベタ塗されてしまいます。

なので、ここを

{hue:"#abce83"},
{saturation:20},
{lightness:-20}

として、指定した色に近くなるように調整しました。

Photoshopを使って、HSBを合わせて見たりしたんですが、上手くいかなかったので、

数値をいじりながら指定した色に近づけたのが上記の値です。

あと、日本の高速道路と国道（？）が同一で塗られてしまっている問題があったので、

{"featureType":"road.highway","elementType":"geometry.stroke"}{"featureType":"road.highway","elementType":"geometry.fill"}{"featureType":"road.highway.controlled_access",
"elementType":"geometry.fill"}

これを指定するといい感じで道路の色分けが出来ます。

この道路種別がよくわからなくて、県道とかも途中から塗られてなかったり

仕様が謎です。

また、配列を扱う際は、

var hogeArray = new google.maps.MVCArray();

を使うことにより、

hogeArray.forEach(function(hoge, idx) {
alert(hoge);
});

とforEachを使って要素を簡単に出すことが可能です。

ですが、自分みたいにマーカに対して一対の情報ウィンドウがある場合、

どちらか片方だけ配列に入れておけば事は足ります。

情報ウィンドウが地図の子供としてあるのですが、

『1つのマーカに対して1つの情報ウィンドウを持つ』

と言った使い方をしている人の方が、多いのではないのでしょうか？

？？？『なんかそういうデータあるんですか？』

？？？『あなたの感想ですよね？』

ええ、私の勝手な感想です^ω^

つまり何が言いたいかと言うと、

『1つのマーカに対して、1つの情報ウィンドウを持つマーカオブジェクトを作れ』

ということです。

お前が作れって話ですね。

めんどくさいです。

配列2個持ちます。

1つのマーカーに対して、1つの情報ウィンドウを持つマーカオブジェクトを

実装させた方は、是非ご一報下さい！

気に入ったら押してね