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つの情報ウィンドウを持つマーカオブジェクトを

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




~こんなアプリ出してます~

authored by Noraneko | Comment(0) | Web
コメント


お名前*

Email Address

URL

コメント*

BLOG内検索
<< 2018/08 >>
Sun Mon Tue Wed Thu Fri Sat
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
<< 過去ログ >>