これを見れば完璧!Google Maps API 取得方法をご紹介します。

GoogleMapは多くの人が利用しているツールで、操作性もいいのでユーザーにも好まれますので、ホームぺージを制作する際に店舗や会社の所在地を地図で表示する個所では、Googleマップをページに埋め込みたいというご要望が多く頂きます。

標準のGoogleマップをページに埋め込むのは、比較的簡単に行えますが、下の画像のように色を変更したり、マップ内のマーカーを変更したりといったカスタマイズを行う場合はGoogle Maps APIが必要です。そこで今回は、Google Maps APIの取得方法についてご紹介します。

Google Maps APIキーの取得方法

Googleアカウントにログインし、Google Cloud Platformにアクセスし、「プロジェクトの選択▼」をクリックします。

「新しいプロジェクト」をクリックします。

お好みのプロジェクト名をつけて「作成」ボタンをクリックします。

プロジェクトの作成が終わったら、クイックアクセスから「APIとサービス」をクリックします。

先ほど作成したプロジェクトをクリックします。

「+APIとサービスの有効化」をクリックします。

「Maps JavaSript API」をクリックします。

「有効にする」をクリックします。

左上のナビゲーションメニューを開き、APIとサービス > 認証情報 をクリックします。

「+認証情報を作成」> APIキー をクリックします。

Google Maps APIキーの制限設定

APIキーが表示されるので、必要に応じてコピーしておきます。
注意書きにある通り、このキーに制限がないため、不正使用を防ぐための設定を行います。
「APIキーを編集」をクリックします。

名前は特に変更の必要はありません。
「HTTP リファラー(ウェブサイト)」にチェックを入れ、「項目を追加」をクリックします。

新しいアイテムにリファラー*という入力欄が表示されるので、サイトのURLの末尾に「*」を追加したものを入力して「保存」ボタンをクリックします。
このサイトであれば、「https://excellent.ne.jp/*」となります。

まとめ

テーマやプラグインでGoogle Maps APIの入力を求められることがあると思います。
Google Maps APIを取得したら、Googleマップのカスタマイズにも挑戦して他のサイトと差をつけたいですね。

カスタマイズやページへの設置はエクセレントで代行することも可能です。
遠慮なくご相談ください。

▼関連サービス
ホームへージ制作サービス

ランディングページ制作

メールでのお問い合わせ

お問い合わせはこちら
メールフォームの内容をご確認頂きまして送信してください。

LINEでのお問い合わせ

お友達登録はこちら
お友達登録をして頂いて
お問合せ内容をトーク画面から送信してください。

Webが得意なホームぺージ制作会社エクセレント

弓取 恭代

弓取 恭代

デザイン制作を中心に、サイト運営に関わる作業全般を担当しています。画像の編集・加工~動画制作まで、なんでも行います。

関連記事

無料相談行っています!!お気軽にご利用ください。
最近の記事 おすすめ記事
  1. 外壁塗装会社がやるべきSEO対策のポイントとキーワードの選定方法を解説します。

  2. リフォーム会社がやるべきSEO対策のポイントとキーワードの選定方法を解説します。

  3. 外構工事・エクステリア業者がやるべきSEO対策のポイントとキーワードの選定方法を解説します。

  4. 歯科医院がやるべきSEO対策のポイントとキーワードの選定方法を解説します。

  5. コンテンツマーケティングって何?簡単にその特徴を説明します。

  6. メールマーケティングの現状と効果的な配信方法とは

  7. Web集客方法を業種別にまとめました。成功のポイントや種類など徹底解説!

  8. エクステリア・外構工事業者のWeb集客で利用出来るポータルサイトを紹介します

  9. 歯科医院・歯医者・矯正歯科専用のポータルサイト一覧

  10. 治療院の新規患者の集客にもう悩まない。最新のWeb集客のコツと考え方

  1. Googleにインデックスされない理由とその調査方法を解説します。

  2. SEO対策の内製化を積極的に取組んでいる中小企業の多くは自社でするSEO対策に迷走している。

  3. 売れているホームぺージ = 集客型ホームぺージに共通しているぺージ構成の法則

  4. これを見れば完璧!Google Maps API 取得方法をご紹介します。

  5. WordPressで投稿するブログで <br> と <br /> はどちらが正しいの?何が違うのか解説します。

  6. WordPressのブロックエディタを利用してページ編集する方法とその投稿方法

  7. Instagramのリールの音源を保存して活用する方法

  8. 「レンダリングを妨げるリソースの除外」という項目はプラグイン Autoptimize  を使って簡単に解決出来ます

  9. コピペで使える!ビジネスブログ向けのシンプルなCSSで飾る見出しデザイン30選

  10. 「使用していない JavaScript の削減」をプラグイン Flying Scripts でスピード解決する方法 

資料を無料ダウンロード

弊社の会社概要と、ご提供サービスのご紹介資料です。
ご覧いただき、お気軽にお問い合わせください。

TOP