skillup

技術ブログ

JavaScript

GoogleMapのカスタマイズ

投稿日:

GoogleMapの埋め込みってよくある要件だと思うのですが、先日、GoogleMapに色(企業カラー)をつけたいという要望がありました。

てっきり埋め込み1行で解決すると思いましたが、色々と調べることに。

ちなみに静的なデータの地図をディフォルトのままでただMapを表示させたいだけでしたら、

普通にGoogleMapにアクセスして、「地図を埋め込む」を選択して貼り付ければいいと思います。

ただ、システムの場合、動的なデータからGoogleMapを呼び出して、なおかつ色などをカスタマイズさせたい場合、少々工夫が必要です。

step1 まずGoogleMapのAPIを取得する

step2 APIキーを元にしてgooglemapのAPIを読み込む

step3 地図をカスタマイズして貼り付ける。

 

ちなみにstylesの部分ですがここのパラメーターを変えてあげると地図の見た目が変化します。

どんなパラメーターを設定したらどんな風に地図が変わるかを知りたい場合は下記のリンクを。

http://jsdo.it/kyo_ago/n17c

参考リンク

APIを使ってGoogleマップの色を変えてみよう!

住所からGoogle Mapをサイトに表示する方法

【コピペで簡単】Google Mapをおしゃれにカスタマイズしよう

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

AngularJSについて

前回のbowerの記事でちょこっと書きましたが、最近はAngularJSというJavaScriptのフレームワークを触っています。 数年前から流行りだしているようで、少しずつ使っている方も増えているの …

no image

JavaScriptのコールバック関数について

JavaScriptでのコールバック関数について。 たまにでてきますが、これまた慣れないと手間取ります。 コールバック関数に関してまとめると以下のような感じでしょうか。 ある関数(func1)の引数と …

no image

途中入力離脱防止処理 JavaScript

WordPressの入力画面なんかでは実装されていますが、途中で文字入力をしてページりだすをしようとするとブラウザのアラートがでます。これも一般のお問い合わせフォームなんかでも実装可能です。 この場合 …

no image

ajaxがらみのイベントの発動とwhenに関して

実務で住所のプルダウンを実装する機会がありました。 [東京都][中央区][明石町] みたいにカテゴリーが2〜3あって連動するプルダウンのパターンです。 これを実装するときのポイントですが、新規保存より …

no image

webpackについて再履修

webpackについて今まで見よう見まねでやってきましたが、おまじないのような感じでプロパティ内部までしっかり理解しているとは言い難いため、再履修です。インストールとかは省略。 今まで書いた既存のwe …