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

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …

no image

JavaScriptのトランスパイルについて

今回はJavaScriptのトランスパイルについて。 JavaSciprtではwebpackでコンパイルなどをする時に同時にトランスパイルという処理を行います。 トランスパイルとは? 主にES2015 …

no image

クロスドメインがらみのajax

ajaxで別ドメインに対して、プログラムを実行したい時に注意すべきことなどを。 Contents1 ログ、レスポンスヘッダをとにかく追う2 特定ドメインからの許可3 フレームワーク側での認証ロジック( …

no image

Vue.jsについて

次の現場で使うかもしれない技術ということでvue.jsをちょこちょこっと勉強。とっていっても1時間ぐらいしか勉強しておらずイントロだけですが・・ Contents1 vue.jsとは?2 ソース3 参 …

no image

AngularJSでのDB接続

AngularJSでデータベースへのアクセスをしたいときの処理を記述します。 注意点としては、なんといっても非同期なことです。同期させることも無理ではないようですが、基本非同期ですので、この点を理解し …