Google Maps APIを使ってWordPressの記事に地図を表示するサンプルコードについて説明する
WordPress：v6.1.1
使用テーマ：Cocoon
はじめに
Google Maps APIを使ってWordPressの記事に地図を表示するサンプルコードについて説明する
↓公式ドキュメントはこちら
Google Maps Platform のドキュメント | Maps JavaScript API | Google for Developers
Google Maps Platform のドキュメント
developers.google.com
↓Google Maps APIを使用するために必要なAPIキーの取得はこちら（無料）
Google Cloud プロジェクトをセットアップする | Maps JavaScript API | Google for Developers
developers.google.com
API キーを使用する | Maps JavaScript API | Google for Developers
developers.google.com
カスタムHTMLブロックで地図を表示する
WordPressでは「カスタムHTML」ブロックを使うことでGoogle Maps APIの地図を記事に埋め込むことができる
カスタム HTML
HTML (Hypertext Markup Language) は、ウェブページの意味的な内容を記述するため…
ja.wordpress.org
Simple Map | Maps JavaScript API | Google for Developers
developers.google.com
上記の地図を表示するためのカスタムHTMLはこれ
<div id="map"></div>
<style type="text/css">
#map{margin: 0px auto;}
</style>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
</script>
<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>YOUR_API_KEYの部分には自身のAPIキーを入力する
↓APIキーは[Google Maps Platform] > [認証情報] ページで確認できる
Google Cloud プラットフォーム
Google Cloud Platform では、Google と同じインフラストラクチャでアプリケーション、ウェブサイト、サービスを構築、導入、拡大することができます。
console.cloud.google.com
↓参考
≫【APIキー】【要確認】Google Maps Platform APIキーの取得方法と注意点
≫【CSS】text-align: center, margin 0 auto〜左右中央寄せする二つの方法
≫【CSS】CSSのidとclassの使い分け
≫【Javascript】Google Maps APIを使ったページの基本構成
おわりに
Google Maps APIを使ってWordPressの記事に地図を表示するサンプルコードについて説明した
↓関連記事
コメント