Googleマップ一覧

2014.10.16

新しいGoogleMapでソースにタグを埋め込む方法

新しいGoogleMapでソースにタグを埋め込む方法

だいぶ前になっちゃいますが、GoogleMapのインターフェイスが変わりましたね。インターフェイスが変わっちゃうと、今までの操作がわからなくなる時があります。変わった当初埋め込みソースの場所が解らなかったので書き残しておきます。

2014.06.20

GoogleMaps APIでズームのコントローラーの表示がズレておかしくなった時の対処法

GoogleMapsAPI

GoogleMapsAPIを使った時にズームしたりコントローラーが崩れておかしい表示になってしまう時があります。html内にGoogleMapsのみ表示させた場合は問題なく表示されているのですが、WebページでGoogleMapsのみなんてレイアウトはほぼありません。色々ページを組んでいった時に見られる現象です。多分、CSSとか悪さをしてるんじゃないかなぁと思っていますが、原因はよく解りません。あぁ~どうしようと思っていたのですが、CSSの追記で解決できます。

2014.05.28

googleマップAPIを設置した時にマウスホイールでズームするのを無効化する方法

マウスホイール

googleマップをWebサイトに設置した時、マウスホイールでズームさせたりすると、コントローラーでいちいち動かさなくても楽ちんです。ですが、ブラウザをマウスホイールでスクロールしていった時にマップにあたると、ブラウザのスクロールが止まってしまいマップがズームされてしまうなんて事があります。ホイールでのズームは楽ですが、デフォルトの表示を大きめにしておけばさほどホイールで動かく事も少ないのではないでしょうか。zoom:1;くらいから引いた表示で見る事なんてほぼ必要ないでしょうし、ホイールをグリグリしまくる程ズームする事も現実あまりありません。ですので、マウルホイールによるズームが不要の場合は動きを無効化しちゃいましょう。

2014.05.07

Googlemapを設置する時にマップの色を「Google Maps API Styled Map Wizard」を使って変更する方法

Googlemap

Googleマップをそのまま使うのも良いのですが、サイトのテイストに合わせてマップの色も変更出来たら嬉しいですね。そこで「Google Maps API Styled Map Wizard」を使ってスタイルを設定します。ちなみに今まで記事に書いてきた建物名の非表示などもGoogle Maps API Styled Map Wizardを使って行う事ができます。Googleマップも色々出来るようになって嬉しいですね。

2014.05.03

Googlemapを設置する時に建物名やカテゴリーアイコンなど全て非表示にしてスタリッシュなマップを作る方法

googlemap

Googleマップをサイトに設置する時、場所を示す沢山の文字やアイコンが表示されます。対象場所の近くを示す意味では非常に大事ではありますが、デザイン上スタイリッシュなマップにしたい時があると思います。そんな時は思い切って全ての文字やアイコンを非表示にしてしまってはどうでしょうか。マップがイラストの様に見えてスッキリすると思います。

2014.04.26

Googleマップのコントローラーを全て無効(表示しない)にする方法

コントローラーを非表示

Googleマップをサイトに設置する時は対象サイトの位置を知らせる事が殆どです。場所によっては細かい説明が必要な場合もありますが、「逆にココしかありません、周りには何もありません、ココです!」という場合もあるかもしれません。そんな場合は特別コントローラーがいらない時もあります。コントローラー達の役割が必要ない場合は消しちゃって、ユーザーにビタッと場所を知らせちゃいましょう。

2014.04.23

Googleマップのマーカーに吹き出しを設置する方法

GoogleMapに吹き出し

Googleマップのマーカー(アイコン)は「場所はここですよー」という事は伝えられますが、住所や電話番号もしくはサイトへのリンクなどの詳細情報を伝える事はできません。実際のGoogleマップでも表示している様な吹き出しを設置し、中に詳細情報を追加できればユーザーに伝える情報はより親切になると思います。さっそく吹き出しを設置していきましょう。

2014.04.18

Googleマップのマーカーをアイコンに変える方法

アイコンを設置

Googleマップで詳細の位置を示すマーカー。そのままでも詳細な場所は解りますが遊び心で会社のロゴマークやかわいいアイコンに変更すると、より「自社感」が増し見た目も楽しくなります。Googleマップを設置する際は、デザインによってアイコン設置の方がサイトコンセプトに合わせてマーカーかアイコンを選ぶのもいいと思います。

2014.04.15

Googleマップに場所を示すマーカーを設置する方法

Googlemapマーカー

Googleマップを設置する際、マップだけ表示していてもどこの位置を示しているのか詳細な場所が解りません。ですので、マーカーを設置して明確な位置を示してあげましょう。

2014.04.09

Googleマップをブラウザ全部に表示する方法

ブラウザ全体

GoogleマップをWebサイトに設置するのは、最近ではごく普通になってきています。サイト内に埋め込む際、サイズはどれくらいでしょうか?対象範囲が広いと入りきらない時があると思います。見えないならzoom設定を広めにしとけば?という意見もあると思いますが、結局ユーザーが大きくしたり、小さくしたりと多少手間がかかってしまいます。また、「googleマップはこちら」というテキストリンクをつけておき解消するという手もありますが、せっかくサイトに来てもらっているので、ページ内で用意できたらいいかなとも思います。