Home
CSS
【Google Maps API】Googleマップ埋め込みのピンを変更する

【Google Maps API】Googleマップ埋め込みのピンを変更する

【Google Maps API】Googleマップ埋め込みのピンを変更する

どうも!かけちまるです!

企業のコーポレートサイトでは、ほぼ必須でGoogleマップが埋め込まれています。

iframeで埋め込むのも簡単でいい。
しかし、Google Maps APIを使うことでピンを企業ロゴなどに変更できたりします。
Google Maps APIを使うと少し手間がかかりますが凝ったデザインにすることができます。

この記事では、

  • ・iframeを使用したGoogleマップの埋め込み
  • ・Google Maps APIの従量課金について
  • ・Google Maps APIの取得方法
  • ・Google Maps APIの取得方法
  • ・Googleマップのカスタマイズ方法

を解説しています。

iframeを使用したGoogleマップの埋め込み

iframeを使った方法はとても簡単で、APIを使う必要はありません。
Googleマップで場所を検索し、埋め込みタグをコピペすることで埋め込みできます。

埋め込みタグをコピー

iframeを使用したGoogleマップの埋め込みの詳しいやり方はこちらの記事を参考にしてください。

Google Maps APIを使用したGoogleマップの埋め込み

Google Maps APIを使う方法では、予備知識が必要になってきます。
その予備知識から解説していきます。

以下の流れで解説していきます。

  • ・Google Maps APIの料金体系について
  • ・Google Cloud Platformで請求先アカウントを作成
  • ・APIキーの発行方法
  • ・APIキーを使用した埋め込み
  • ・ピンの変更方法などのカスタマイズ

Google Maps APIの料金体系について

Google Maps APIの料金体系は従量課金制です。
しかし、Google Maps API全体で無料枠(毎月$200)があります。
このGoogle Maps API全体で無料枠を超えた分だけ料金が発生します。
また、費用を抑えるために使用量制限もかけることができます。

じゃあ、どのくらいまでなら無料で使えるのかというところです。
それは、Googleが公式で料金表を公開しているのでそちらでチェックできます。

Google Maps API料金表:
https://cloud.google.com/maps-platform/pricing/sheet/?hl=ja

今回のやり方だと、最大28,000回の読み込みまで無料ということになります。

Google Cloud Platformで請求先アカウントを作成

まずは、Google Maps APIを使用するためにGoogle Cloud Platformで請求先アカウントを作成していきます。
Google Maps APIの料金体系は従量課金制なので、請求先アカウントを作成しておかないとGoogleマップがうまく表示されないので注意です。

前提としてGoogleアカウントを作成されていることが必要になります。

1

Google Cloud Platformにアクセスし、メニュー > お支払いに移動

Google Cloud Platformにアクセスし、お支払いに移動
2

自分の請求アカウントタブからアカウントを作成をクリック

アカウントを作成をクリック
3

各種項目を設定する

名前やお支払い情報などを設定して、送信して課金を有効にするをクリックします。 

アカウントを作成をクリック
4

請求先アカウントの作成は完了です。

APIキーの発行方法

Google Maps APIを使用するためにAPIキーを取得します。

前提条件として

  • ・Googleアカウントが作成されていること
  • ・Google Cloud Platformで請求先アカウントを作成していること

が条件です。

1

Google Cloud Platformにアクセスし、プロジェクトの選択 > 新しいプロジェクトをクリック

  Google Cloud Platformにアクセスし、新しいプロジェクトをクリック
2

任意でプロジェクト名を設定し、作成をクリック

任意でプロジェクト名を設定
3

プロジェクトを選択から作成したプロジェクトを選択し、開くをクリック

もし、プロジェクトを選択が表示されてない場合は、サイトを読み込み直してみてください。

作成したプロジェクトを選択
4

Maps JavaScript APIの有効化

選択したプロジェクト内で、Maps JavaScript APIを有効化します。
メニュー > APIとサービス > ライブラリをクリックします。

Maps JavaScript APIを有効化

Maps JavaScript APIで検索し、Maps JavaScript APIを表示します。

Maps JavaScript APIを表示

Maps JavaScript APIを表示し、有効にするをクリックします。

Maps JavaScript APIを表示

これでAPIの有効化は完了です。

5

APIキーを取得

メニュー > APIとサービス > 認証情報をクリックします。

認証情報をクリック

画面上部で認証情報を作成 > APIキーをクリックします。

  APIキーをクリック

これでAPIキーを作成できました。

  APIキーを作成
6

APIキーをコピー

メニュー > APIとサービス > 認証情報をクリックします。

認証情報をクリック

作成されたAPIキーをコピーしてください。
Googleマップを埋め込むときに使用します。

APIキーをコピー

基本的な埋め込み

実際にAPIを使ってGoogleマップを埋め込んでいきます。

まずは、Maps JavaScript APIを読み込むためのscriptタグを追加します。
Headタグ内かbodyタグの最後に記述すると良いでしょう。

APIキーの部分に発行したAPIキーを記述してください。

HTML
コピー
<script src="https://maps.google.com/maps/api/js?key=APIキー&language=ja"></script>

埋め込みたい場所にGoogleマップを表示するためのdivタグを記述します。
id属性は任意で決めてください。

HTML
コピー
<div id=“google_map”></div>

CSSでサイズを適度に調整してください。

CSS
コピー
#google_map{ height: 300px; width: 100%; }

以下のJavaScriptでGoogleマップを表示できると思います。
まだ、ピンが表示されませんがこれが基本形になります。

JavaScript
コピー
<script> var MyLatLng = new google.maps.LatLng(35.65871995583428, 139.7454221687028); //座標を指定 var Options = { zoom: 15, //地図の縮尺値を指定 center: MyLatLng, //地図の中心座標 mapTypeId: 'roadmap' //地図の種類を指定 }; var map = new google.maps.Map(document.getElementById('google_map'), Options); //埋め込むMAPのidを指定 </script>

表示サンプル

デフォルトのピンを表示する

デフォルトのピンを表示したい場合は、以下のJavaScriptを追記してください。

JavaScript
コピー
//デフォルトピンの指定 var marker = new google.maps.Marker({ position: MyLatLng, map: map, });

表示サンプル

オリジナルのピンを表示する

オリジナルのピンを表示したい場合は、以下のJavaScriptを追記してください。
デフォルトピンの記述をしている場合は削除してください。

JavaScript
コピー
//オリジナルピンの指定 var marker = new google.maps.Marker({ position: MyLatLng, map: map, icon: { url: './image/google_pin.png',//マーカー画像URL scaledSize: new google.maps.Size(50, 50),//ピンの表示サイズ anchor: new google.maps.Point(25, 25)//ピンの位置調整 }, });

表示サンプル

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

UNPKGの使い方~npmで公開済のパッケージを使えるCDNサービス~

UNPKGの使い方~npmで公開済のパッケージを使えるCDNサービス~

【WordPress】PHPテンプレートでショートコードを使う方法

【WordPress】PHPテンプレートでショートコードを使う方法

【SVG】vivus.jsで手書き風テキストアニメーションを実装

【SVG】vivus.jsで手書き風テキストアニメーションを実装

CSSだけでぷよぷよしたアニメーションの実装方法

CSSだけでぷよぷよしたアニメーションの実装方法

【Macユーザー向け】ngrokでローカル環境のサイトを外部へ公開

【Macユーザー向け】ngrokでローカル環境のサイトを外部へ公開

【Adminer】Local by Flywheelでデータベースを操作しよう

【Adminer】Local by Flywheelでデータベースを操作しよう