白黒のGoogleマップをサイトに埋め込む方法
- 発行日 2025-03-27
- 発行部数 42309 部
こんにちは。中田です。
いつもありがとうございます。
-----------------------------------------
寺院・神社のWordPressテーマ「ZEN」
https://tcd-theme.com/tcd113
-----------------------------------------
■白黒のGoogleマップをサイトに埋め込む方法
時々頂くお問い合わせのひとつ。
「Googleマップをサイトに埋め込むにはどうしたらいいの?」
これにお答えします。
簡単に言うと
Googleマップ上で、埋め込みコードをコピーして、
それをサイトに貼り付けるだけ。
アクセスページを固定ページで作るなら、
エディタ内にコピペすればOKです。
詳しい手順をこちらで記載しています。
https://tcd-theme.com/2021/08/google-map-embed.html
簡単ですね。
ちなみに、TCDのデモでは、
白黒のマップをよく使っています。
https://demo.tcd-theme.com/tcd106/service/company/
このマップのように、
配色の変更やマーカーのカスタマイズを行う場合は
APIの利用が必要になります。
APIは基本無料ですが、
月10000回の表示回数を超えると有償になるようです。
利用が1サイトだけなら、
無料で使える可能性は高いでしょう。
ただ、設定が面倒な方は
デフォルトのままで十分だと思います。
APIキーの発行はこちらの記事を参考にしてください。
・Google Maps Platform APIキーの取得方法と注意点
https://tcd-theme.com/2018/08/google-maps-platform-api.html
・API キーを使用する | Maps JavaScript API
https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja
APIキーを発行したら、
TCDテーマの「クイックタグ」のところに
コピペする入力欄を設けています。
そこでマップの背景色とマーカーが選べるようになっています。
それではまた。
■国内トップクラスの
「費用対効果」「機能性」「デザイン」を兼ね備えた日本語用ブログテンプレート
美しいギャラリーサイトが作成できる。
https://tcd-theme.com/tcd112
クリニック・病院のためのWordPressテーマ
https://tcd-theme.com/tcd110
洗練されたホテル・レストランのWordPressテーマ
https://tcd-theme.com/tcd109
優秀な営業マンのような販売サイトを作成。
https://tcd-theme.com/tcd105
高度な不動産ポータルサイトを作成
https://tcd-theme.com/tcd111
■おすすめ記事(定期更新)
・ホームページ制作でありがちな失敗例
https://tcd-theme.com/2025/01/website-create-failure.html
・渋井不動産の営業力がすごかった話
https://qore.info/13896/
・【2025年版】不動産集客のネット戦略を紹介
https://tcd-theme.com/2025/03/real-estate-online.html
・WordPressテーマの変更手順まとめ
https://tcd-theme.com/2023/12/how-to-change-wordpress-theme.html
・WordPressサイトの作り方
https://tcd-theme.com/2024/08/do-it-yourself-homepage.html
【メルマガプライバシーポリシー】
登録された個人情報(メールアドレス)を正しく保管し、
漏えいすることのないよう、保護に努めることを宣言します。
アドレスには、当メルマガの配信以外には使用致しません。
【140,000部のメルマガに広告を掲載できます】
https://design-plus.info/advertise/
【株式会社デザインプラスとは?】
https://design-plus.info/
【運営サイト】
・WordPressテーマTCD https://tcd-theme.com/
・TCD GALLERY https://tcd.gallery/
・TCD MUSEUM https://tcdmuseum.com/
・TCD LABO https://tcd-manual.net/
【TCDのアップデート情報】
https://tcd-theme.com/update
【お問い合わせ・ご質問はこちら】
TCDに関するお問い合せ https://tcd-theme.com/contact
求人採用について https://design-plus.biz/
【メールマガジン バックナンバー】
https://mip.y-ml.com/_bcn?id=1001
最後までお読み頂きありがとうございました。
---------------------------------------------------------
発行者: 株式会社デザインプラス
担当者: 中田俊行
所在地: 〒542-0066 大阪市中央区瓦屋町1-5-20
連絡先: https://design-plus.info/contact/
Copyright DesignPlus INC All Rights Reserved.
---------------------------------------------------------
いつもありがとうございます。
-----------------------------------------
寺院・神社のWordPressテーマ「ZEN」
https://tcd-theme.com/tcd113
-----------------------------------------
■白黒のGoogleマップをサイトに埋め込む方法
時々頂くお問い合わせのひとつ。
「Googleマップをサイトに埋め込むにはどうしたらいいの?」
これにお答えします。
簡単に言うと
Googleマップ上で、埋め込みコードをコピーして、
それをサイトに貼り付けるだけ。
アクセスページを固定ページで作るなら、
エディタ内にコピペすればOKです。
詳しい手順をこちらで記載しています。
https://tcd-theme.com/2021/08/google-map-embed.html
簡単ですね。
ちなみに、TCDのデモでは、
白黒のマップをよく使っています。
https://demo.tcd-theme.com/tcd106/service/company/
このマップのように、
配色の変更やマーカーのカスタマイズを行う場合は
APIの利用が必要になります。
APIは基本無料ですが、
月10000回の表示回数を超えると有償になるようです。
利用が1サイトだけなら、
無料で使える可能性は高いでしょう。
ただ、設定が面倒な方は
デフォルトのままで十分だと思います。
APIキーの発行はこちらの記事を参考にしてください。
・Google Maps Platform APIキーの取得方法と注意点
https://tcd-theme.com/2018/08/google-maps-platform-api.html
・API キーを使用する | Maps JavaScript API
https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja
APIキーを発行したら、
TCDテーマの「クイックタグ」のところに
コピペする入力欄を設けています。
そこでマップの背景色とマーカーが選べるようになっています。
それではまた。
■国内トップクラスの
「費用対効果」「機能性」「デザイン」を兼ね備えた日本語用ブログテンプレート
美しいギャラリーサイトが作成できる。
https://tcd-theme.com/tcd112
クリニック・病院のためのWordPressテーマ
https://tcd-theme.com/tcd110
洗練されたホテル・レストランのWordPressテーマ
https://tcd-theme.com/tcd109
優秀な営業マンのような販売サイトを作成。
https://tcd-theme.com/tcd105
高度な不動産ポータルサイトを作成
https://tcd-theme.com/tcd111
■おすすめ記事(定期更新)
・ホームページ制作でありがちな失敗例
https://tcd-theme.com/2025/01/website-create-failure.html
・渋井不動産の営業力がすごかった話
https://qore.info/13896/
・【2025年版】不動産集客のネット戦略を紹介
https://tcd-theme.com/2025/03/real-estate-online.html
・WordPressテーマの変更手順まとめ
https://tcd-theme.com/2023/12/how-to-change-wordpress-theme.html
・WordPressサイトの作り方
https://tcd-theme.com/2024/08/do-it-yourself-homepage.html
【メルマガプライバシーポリシー】
登録された個人情報(メールアドレス)を正しく保管し、
漏えいすることのないよう、保護に努めることを宣言します。
アドレスには、当メルマガの配信以外には使用致しません。
【140,000部のメルマガに広告を掲載できます】
https://design-plus.info/advertise/
【株式会社デザインプラスとは?】
https://design-plus.info/
【運営サイト】
・WordPressテーマTCD https://tcd-theme.com/
・TCD GALLERY https://tcd.gallery/
・TCD MUSEUM https://tcdmuseum.com/
・TCD LABO https://tcd-manual.net/
【TCDのアップデート情報】
https://tcd-theme.com/update
【お問い合わせ・ご質問はこちら】
TCDに関するお問い合せ https://tcd-theme.com/contact
求人採用について https://design-plus.biz/
【メールマガジン バックナンバー】
https://mip.y-ml.com/_bcn?id=1001
最後までお読み頂きありがとうございました。
---------------------------------------------------------
発行者: 株式会社デザインプラス
担当者: 中田俊行
所在地: 〒542-0066 大阪市中央区瓦屋町1-5-20
連絡先: https://design-plus.info/contact/
Copyright DesignPlus INC All Rights Reserved.
---------------------------------------------------------