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

npmコマンドの整理

npmのコマンドのまとめに関して。 Contents1 npmとは?2 よく使うコマンド2.1 npm init -y2.2 npm install パッケージ名(npm -i パッケージ名)2.2. …

no image

JSでの他ファイル読み込み。requireやimportについて

JavaScriptに関して、知識が非常に古い段階で止まっているのでコツコツとアップデートをしております。 今回はrequireやimportなど、他のファイルの読み込みについてです。 PHPなどサー …

no image

switch(true)イディオム

switch文は通常、文字や数字で分岐をさせることが多いですが、実は条件式を入れることも可能です。 私の場合、正規表現を動的に変えたいケースがあり、検索したところ似たケースがありました。 【JavaS …

no image

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

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

no image

JavaScriptのcookieに関して

今までCookieの管理などはPHP側でやることが多かったのですが、JavaSciprtで実行することも可能です。 設定に関してはkey=value形式で突っ込めばOKです。 [crayon-5fc2 …