Windowsの仕様
エディション:Windows 10 Pro
バージョン:20H2
経緯
WordPressで旅行記を書いているのですが、記事が羅列するだけでかっこわるかった。
そこで、トップ画面に地図を載せて、行った場所にアイコンを置いて、それをクリックすると
その記事に飛ぶという仕様にしたくて、勉強しました。
今回は、地図に任意のアイコンを載せるというところまでです。
手順
工程が多いので、初めに手順を書きます。
- Google Maps Platform からAPIキーを取得する
- JavaScriptファイルの配置
- 画像の配置
- functions.phpの編集
- 記事に書いてみる
といった流れです。
1. Google Maps PlatformからAPIキーを取得する
まず、Google Maps PlatfromからAPIキーを取得します。
https://mapsplatform.google.com/intl/ja/ にアクセスしてください。お金がかかることがあるので、注意してください。
”使ってみる”をクリック。アカウント選択がでるので、自身Googleのアカウントログインしてください。
ログインすると、「開始するにはプロジェクトを作成します」とでるので、適当に”プロジェクト名”など決めてください。できたら、”作成”をクリック。
「有効な請求アカウントがありません」とでます。”請求先アカウントを管理”をクリック。
”アカウントを作成”をクリック。
「新しい請求先アカウントの作成」とあるので、”名前”を適当な名前にして、”続行”をクリック。
「課金情報の設定」を記入して、”送信して課金を有効にする”をクリック。
次に”APIとサービス”をクリック
「有効なAPIサービス」とあり、その中に「最近のプロジェクトの選択」とあるので、先ほど作ったプロジェクトをクリック。
”ライブラリ”をクリック。
すると、「APIライブラリへようこそ」とでますので、今回使うAPI”Maps JavaScript API”をクリック。”有効にする”クリック。
「プロジェクト「」の請求先アカウント設定」と出るので、請求先アカウントを紐づけます。”アカウントを設定”をクリック。
質問がいくつか出てくるので、それに答えて、”送信”をクリック。
すると、「Google Maps Platformを使ってみる」とでるので、
”GOOGLE MAPS PLATFORMに移動”をクリック。
Google Maps Platformに飛びます。そこのサイドバーの”認証情報”をクリック。
「APIキー」のあたりに”Maps API Key”とあるのでそれをクリック。
すると、いろいろ制限ができる画面になります。右上に”鍵を表示します”をクリック。
「Maps API Key」とでて、自分のAPIキーが表示されます。
これでGoogle Maps PlatfromからAPIキーの取得は終わりです。
文章だけで書いたので、わかりにくいと思いますが、Google Maps PlatfromからAPIキーの取得の動画もたくさんあるので、それと併用しながらやるとわかりやすいと思います。
2. JavaScriptの配置
JavaScriptのファイルを配置
保存先は “/wp-content/themes/your-theme/js” ディレクトリを無い場合作成してください。*your-themeは自身が使っているテーマにしてください。
以下がコードです。”custom-map.js”という名前で保存します。
今回は東京を中心に「北岳」と「富士山」にアイコンを載せたいとおもいます。
// 地図を初期化する関数
function initMap() {
// 地図の初期設定を定義
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: { lat: 35.6895, lng: 139.6917 } // 例: 東京を中心にする
});
// 訪れた山のデータを配列として定義
const mountains = [
{ name: '富士山', position: { lat: 35.3606, lng: 138.7274 }, article: 'https://example.com/fuji' },
{ name: '北岳', position: { lat: 35.6639, lng: 138.2383 }, article: 'https://example.com/hokutake' },
// ...他の山のデータもこのように追加可能
];
// 各山のデータに対して処理を行う
mountains.forEach((mountain) => {
// 山の位置にマーカーを設定
const marker = new google.maps.Marker({
position: mountain.position,
map,
title: mountain.name,
icon: 'https://yourwebsite.com/wp-content/themes/your-theme/images/mountain_icon.png' // 山のアイコン画像のパス
});
// マーカーをクリックした時の動作を設定
marker.addListener('click', () => {
window.location.href = mountain.article; // 対応する記事に遷移
});
});
}
// ページの読み込みが完了したら、initMap関数を実行して地図を表示
window.addEventListener('load', initMap);
3.画像の配置
/wp-content/themes/your-theme/images/’ディレクトリに山のアイコン画像をアップデートします。
アイコンのファイル名は”mountaion_icon.png”とします。
3. functions.phpの編集
自身のテーマの’functions.php’に以下のコードを追加してください。
function add_custom_map_scripts() {
// Google Mapsのスクリプトを追加
wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY', array(), null, true);
// カスタムの地図のスクリプトを追加
wp_enqueue_script('custom-map', get_template_directory_uri() . '/js/custom-map.js', array('google-maps'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'add_custom_map_scripts');
// ショートコードの関数
function custom_map_shortcode() {
return '<div id="map" style="height: 400px; width: 100%;"></div>';
}
add_shortcode('custom_map', 'custom_map_shortcode');
3行目の「YOUR_API_KEY」のところにはじめに取得した、APIキーをいれることを忘れないでください。
5. 記事に書いてみる
最後にWordPressを開いて、記事を書きます。
[custom_map]と入力するとして、プレビューで確認してみてください。富士山あたりにマップを動かすと、指定したアイコンが表示されていると思います。
こんな感じで地図にアイコンを載せることができました。
今後はこのアイコンを記事とリンクさせて、アイコンをクリックすると、記事に飛ぶという仕様にしたいと思います。
参考になれば、幸いです。
ここまで読んでいただきありがとうございました。
スクールの紹介
ここまで読んでいただきありがとうございました。
最後に宣伝をさせてください。
技術で未来を切り拓く―あなたの夢を現実にするプログラミングスクール
Webデザインやプログラミングで成功を目指している方々にとって、このオンラインスクールは夢を叶えるための最適な場所です。皆さんのキャリアを次の段階へと引き上げるためにデザインされたこのスクールは、一人ひとりの成功を心から願い、それを実現するための全てを提供しています。ここでは、このスクールの魅力について詳しくご紹介します。
◆圧倒的な費用対効果
このオンラインプログラミングスクールは、Web系教育において最高の費用対効果を提供しています。多くの高額スクールが存在する中で、ここではリーズナブルな価格で、質の高い教材、無限のサポート、そして実際に市場で求められるスキルの習得機会を提供しています。
◆現役フリーランスの講師陣
講師たちは全員、現役のフリーランスプロフェッショナルです。市場で活躍している講師から直接、最新のトレンドや実践的なスキルを学べるのは、このスクールの大きな特徴です。
◆柔軟な学習コース
固定のコースがなく、学習者の興味やニーズに応じて自由に学習できます。進路変更も自由で、最低契約期間は1ヶ月という柔軟性を持っています。自分のペースで、自分に合った学習が可能です。
◆無制限の添削とサポート
理解できるまで、そして満足するまで、無制限に添削と質問への回答を提供しています。進路相談や技術面以外の相談にも対応しており、全面的にサポートします。
◆社長から学べる貴重な機会
デザイナー、プログラマー、ディレクター、マーケターとして豊富な経験を持つ社長から直接学べるのも、このスクールの特別な点です。他のスクールでは得られない、貴重な機会です。
◆実績作りへの徹底的なサポート
就職、転職、フリーランスとして成功するためには、高品質な実績が必要です。生徒の作品レベルを最大限に高め、市場で求められる実績を作り上げることに力を入れています。案件を取得できない生徒には、直接案件を提供することもあります。
◆メッセージからの約束
高額な授業料を支払わせて結果を出せないスクールとは違い、物理的なサポートは提供できないかもしれませんが、継続的な努力を通じて最高の結果を出せるようにサポートします。一緒に不正なスクールを撲滅し、あなたの夢を実現しましょう。
このプログラミングスクールは、Webデザインやプログラミングでの成功を目指す方々に必要な全てを備えています。今こそ、このコミュニティに参加し、あなたのキャリアを加速させる時です。
詳しくはこちら↓
