Google Maps API

これは、 GoogleMaps API の実装実験です。

※ 最初の実験を公開した日は不明ですが、 API V3 で動作していた古いサンプルは こちらに移しました。

とりあえずただの地図

APIのURLは下記の通り。

https://maps.googleapis.com/maps/api/js?key={$APIKey}

Google Cloud Console にログインし、 API キー 文字列を生成して指定する必要があります。

ロケーション操作

中心に表示する場所(緯度経度)を指定する実験。

navigator.geolocationを使って現在地を取得するのをやってみた。

位置情報は、google.maps.LatLng のインスタンス。デフォルトの位置は、google.maps.Map のインスタンスを作成するときに渡してあげるらしい。

あとから移動させる

あとから移動させる場合は、Map.setCenter() を使う。

Map.setCenter() の代わりに Map.panTo() を使うと、滑らかに移動するみたい。

ちなみに、現在表示中の位置情報を得るのは、Map.getCenter()

緯度経度の範囲

Map.getBounds() メソッドで、現在のビューポートの緯度経度の範囲 を取得できます。Map.fitBounds() を使ったら、セットもできるのかも。

これを使って、画面スクロールのボタンも作ってみます。

ズームレベル

ズームレベルを変更するには、Map.setZoom() を使います。

ズームレベルは 0 から始まる数字で指示します。0 は一番広域で、世界中が見えるサイズ。最大値は 22 まで拡大できることが確認できました(新宿駅周辺の地図)。

ちなみに、現在のズームレベルを得るのは、Map.getZoom()

マーカーを表示する

地図上にマーカーを表示します。マーカーとは、地図上に表示される、ピンとかのこと。

この例では、ついでに InfoWindow も表示してみました。InfoWindowには、HTMLを表示することができます。

マーカーのクリックイベントは、google.maps.event.addListener() を通じて登録します。このイベントで InfoWindow.open() を実行して、こうなりました。

コントロールのカスタマイズ

コントロール(操作パネル系)の表示について、いくらか設定することができます。

Map をインスタンス化する際の第2引数に渡すオプションをいじくることでできるようです。何ができるかは、MapOptions オブジェクトの仕様に書いてあります。
マウスカーソルの絵を変更したり、ドラッグ操作を禁止したり、いろいろ変更できそう。

適当ないくつかをやってみます。

Geocoding API

Geocoding API は、郵便番号や住所などの情報を扱う API です。

Status

Result

プロフィール

コヤナギ トモヤ

ウェブ系エンジニアしてます。ウェブデザイナー、ウェブディレクターとしてウェブ制作の仕事に携わり、今はエンジニア職に流れ着きました。誰かのお仕事をちょっとだけ効率化するような支援ツールの開発が好き。オープンソースとMITライセンス大好き。人生後半は自由と民主主義のコントリビューターとして過ごす予定。

ウェブ制作支援ツール Pickles 2 をオープンソースで開発しています。

PHP/JavaScript/NodeJS/nwjs/Laravel/Pickles2/オープンソース/心理学/倫理/自由と民主主義

RSSフィード

  • このサイト https://www.pxt.jp/ は、 コヤナギ トモヤ の個人サイトです。
  • 個人的な主張や、活動の記録などを掲載しています。 所属する企業、団体、その他の意見や立場を代表するものではありません。
  • 掲載された内容は古くなっている可能性があります。 特に古い記事では、現在の筆者の考えと異なる主張をしていることがありますが、記録としてそのまま残しております。 予めご了承ください。
ページの先頭へ戻る