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

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

Angularをやるうえで前提となるJavaScriptの知識を書いていこうかと。 関数を変数として扱い、別の関数の引数にできる JavaScriptの特徴の1つとして関数を変数のように扱えるというの …

no image

HTML&JSなど画面まわり&サーブレット小ネタ

サーブレットでアプリ作ってますが、画面まわりに関していろいろいじっているのでそこら辺のネタなんかを。 Contents1 テーブルの結合2 JSPでの動的HTML→POSTで認識できない3 動的プルダ …

no image

ページャープラグイン dataTable

レコードを一覧表示する上で意外と面倒くさいのがページャーでしょう。 自力で作成してもよいのですが、なかなかこれが面倒だったりします。 また近年ではリンクを踏ませずに、スクロールするだけで表示ができる形 …

no image

携帯のUIに関して

いまさらながらスマホのUI表示に苦戦してます。 まあ、現状のWEBサイトを作る場合、BtoCでもBtoBでもスマホ対策は必須ですよね。 私の場合、デザインが本業でないこともあり、ちょっとサボっていまし …

no image

JavaScriptでの時計作成

今回はWebアプリで1秒ごとに更新されるデジタル時計の作成方法について。 基本的には 現在時刻を秒まで含めて表示 その関数を一秒ごとに更新 でOKです。 ネットにどんぴしゃりのサンプルが落ちていたので …