感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

GoogleのMap Chartsを使って、日本地図や各都道府県の画像を表示するURLの使い方のまとめ

<スポンサーリンク>

$(document).readyと$(windo).loadの違い

$(document).readyはHTMLページのコードの読み込みが完了したときに実行する処理を指定する。
しかし、このときに画像の読み込みが終わっている保証はない。

$(document).ready

一方で、$(window).loadは画像を含めて、HTMLページを構成するすべてのコンテンツの読み恋が完了したタイミングで処理を実行する。

$(window).load

日本地図を表示するURLのまとめ

GoogleのチャートAPIで日本地図を表示することができる。以下のURLで、日本地図の画像を表示することができる。

https://chart.googleapis.com/chart?cht=map&chs=400x300&chld=JP&chco=d0d0d0|880000&chf=bg,s,eeeeff&chld=JP|

グレーな感じの地図はこちら。

https://chart.googleapis.com/chart?cht=map&chs=400x400&chld=JP-01|JP-13|JP-47&chco=676767|FF4444|44FF44|4444FF|

一番最後のJPの部分を色々と変えると、他の国の地図が表示される。

https://chart.googleapis.com/chart?cht=map&chs=400x300&chld=JP&chco=d0d0d0|880000&chf=bg,s,eeeeff&chld=AU|

たぶんこれはオーストラリア。

ちなみに、特定の都道府県の色だけ変えた地図を表示するには以下のようにURLを使う。

https://chart.googleapis.com/chart?cht=map&chs=400x300&chco=d0d0d0|880000|8080ff&chf=bg,s,eeeeff&chld=JP|JP-01

上のURLだと北海道だけ色が変わる。
次のURLだと、東京の色が変わる。

https://chart.googleapis.com/chart?cht=map&chs=400x300&chco=d0d0d0|880000|8080ff&chf=bg,s,eeeeff&chld=JP|JP-13

JavaScriptで動的に値を取ってきて、一番末尾に都道府県に対応した「JP-01」みたいのをくっつけることで、指定した都道府県だけを色を変えて表示できる。

https://chart.googleapis.com/chart?cht=map&chs=400x300&chco=d0d0d0|880000|8080ff&chf=bg,s,eeeeff&chld=JP|JP-01|JP-46|JP-02

後ろのパイプ「|」で付け足していくことで、複数の都道府県の色を変えることができる。

なお、GoogleのMap Chartsの説明は以下のURL先に載っている。
https://developers.google.com/chart/image/docs/gallery/new_map_charts?hl=ja
パラメータに何を指定したらどんな地図が出るのか詳細に載っている。
HTML × JavaScriptで何かを作る時に活用できるはず。

勉強した本

感謝のプログラミング

今回で感謝のプログラミングは【520時間目】
10000時間まで、あと【9480時間】