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ではないよ!
こっちは使い勝手がすごく良いので使ってくださいな

終わり

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

6 件のコメント:

  1. Thanks for sharing, nice post! Post really provice useful information!

    Giaonhan247 chuyên dịch vụ vận chuyển hàng đi mỹ giá rẻ, dịch vụ gửi hàng đi mỹ giá rẻ nhất, vận chuyển gửi hàng từ việt nam đi mỹ hay chuyển hàng đi mỹ giá rẻ nhất giải đáp làm thế nào gửi hàng đi mỹ nhanh nhất.

    返信削除
  2. I’m really enjoying the design and layout of your site. It’s a very easy on the eyes which makes it much more pleasant for me to come here and visit more often. 카지노사이트존

    返信削除
  3. This article is genuinely a nice one it helps new net viewers, who are wishing in favor of blogging.
    카지노사이트

    返信削除
  4. Interesting webpage. I really like the design and the useful information. 온라인바둑이

    返信削除
  5. I've always been wasting my time, but I m here to read a lot of good information and good articles. Please update it every day. Thank you. 바카라사이트

    返信削除