Google Maps API を使ってみた

会社の地図を Google マップに変更しようと思ってやってみたのだが、概念が最初掴めなくて手間取った。
そのポイントのメモです。

もっとも重要なのは、レイヤーの概念です。
地図の上に他のオブジェクトを乗せる、これが基本です。

あとは、乗せるオブジェクトをどの様に生成するのかをドキュメントから読み取れれば OK。

例えばうちのサイトの HTML ソース。
※前提として、Google Maps API のキーを取得すること

function GLoad() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“head_map”));
map.setCenter(new GLatLng(35.656146,139.694703), 15);
map.addControl(new GSmallMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
map.addOverlay(new GMarker(new GLatLng(35.654899,139.691457)));
}
}

適当に id を指定した(今回の場合は head_map)に対し、新しい GMap2 インスタンスを生成、map 変数に割り当てる。これで地図レイヤー完成。

そして、setCenter メソッドで座標と拡大率を指定する。

さらに、addControl メソッドでレイヤーにオブジェクトを追加していけば、動くものができあがるというわけです。

上のソースはほとんどサンプルのままですが、位置や拡大・縮小用のボタンを追加するコントロール(GScaleControl)、通常の地図以外に航空写真などを表示するコントロール(GMapTypeControl)、地図上の特定の位置を示すマーカーコントロール(GMarker)を配置してみたものです。

このレイヤーの概念さえわかっていれば、API ドキュメントも読みやすいのでは無いかと思います。

10年集客し続けられるサイトを、ワードプレスで自作する9つのポイント プレゼント

【最後まで読んでくれたあなたに】

あなたは、24時間365日、自分の代わりに集客し続けてくれるWebサイトを作りたい!と思ったことはありませんか?

私はこれまで500以上のWebサイトの構築と運営のご相談に乗ってきましたが、Webサイトを作ってもうまく集客できない人には、ある一つの特徴があります。

それは、「先を見越してサイトを構築していないこと」です。
Webサイトで集客するためには、構築ではなく「どう運用するか」が重要です。

しかし、重要なポイントを知らずにサイトを自分で構築したり、業者に頼んで作ってもらってしまうと、あとから全く集客に向いていないサイトになっていたということがよく起こります。

そこで今回、期間限定で
『10年集客し続けられるサイトをワードプレスで自作する9つのポイント』
について、過去に相談に乗ってきた具体的な失敗事例と成功事例を元にしてお伝えします。

・ワードプレスを使いこなせるコツを知りたい!
・自分にピッタリのサーバーを撰びたい!
・無料ブログとの違いを知りたい!
・あとで悔しくならない初期設定をしておきたい!
・プラグイン選びの方法を知っておきたい!
・SEO対策をワードプレスで行うポイントを知りたい!
・自分でデザインできる方法を知りたい!

という方は今すぐ無料でダウンロードしてください。

期間限定で、無料公開しています。

※登録後に表示される利用条件に沿ってご利用ください

コメントを残す