2017年12月7日木曜日

Google Maps API を使ってみた

Google Maps APIを使ってみた

アドベントカレンダー6日目の記事です。

あいさつ

こんにちは。初めてブログ書きまっする。何か変だったら教えてください。
ブログ書いている人が変なのは許してください。なんでもしますから。

Google Maps APIを使ったお

APIの種類は、Google Maps JavaScript API v3。
みんな大好きの地図API。
地図の表示・経路探索・マーカーの設置など、地図系のやりたいことがほとんどできるすごいやつ。
でも使ってみると意外と詰まる場所・よくわからん場所があった。(めちゃプログラミングできないマンの意見)
この記事では、そこらへんをご紹介する。

と思ったけど、ブログ書くの意外と大変だから「マーカーについて」だけ書くことにした。 まあ初めてだししょうがないよね。

Google Maps APIのマーカーとは?

マーカーの使い方は こ↑こ↓(マーカーのドキュメント) に書いてある。

ちなみにさっきから言ってるマーカーは下みたいなやつのことです。一応ね?
マーカーの例
で?マーカー使って何ができる?ってなりますよね。
私は「情報ウィンドウ」と「イベントの追加」を使ったので、お話ししますね。

マーカーの上に情報ウィンドウのお話

まず情報ウィンドウというのは、下みたいなやつのことを言います。
情報ウィンドウの例
マーカーに情報ウィンドウを設定することで、説明文っぽいのが出せます。

これを見るとええやん!使えそう!ってなるじゃないですか〜?
実際使うと結構難しいです。理由は情報ウィンドウのデザインのしにくさです。

情報ウィンドウのデザインですが、htmlタグを文字列で渡すことで行います。
やばい匂いがプンプンするぜ!
実際に試す のサンプルコードより抜粋
情報ウィンドウのサンプルコード
なんか緑色ばかりでよくわからないっすね。
実際書いてる途中で何がなんだかわからなくなる。

結論... 情報ウィンドウは一言説明をするために使おう。

イベントの追加のお話

情報ウィンドウの追加でも使っていたように、addListenerでmarkerにアクションを追加できる。
addEventListenerではないよ!
こっちは使い勝手がすごく良いので使ってくださいな

終わり

すみません。今回はもう勘弁してください。
次はもっとちゃんと書くよ。
今日は閉廷します。ドドンッ!

0 件のコメント:

コメントを投稿