マップを表示させたブログトップページで詳細ページへのリンク付きのインフォウィンドウを表示できるようにした。
ここの記載されているリンクから詳細ページへ遷移するわけだけど、
詳細ページでも
https://saitodev.co/walk2eat/restaurant/農場の家
こんな感じでコンテンツの一つとして、店舗の位置を示した地図と、
閲覧者がアクセスしやすいようにGoogle Mapsへのリンクを表示したくなるもの。
というわけで、
今回はブログページの記事毎ページの設定を紹介します。
単刀直入に記事毎ページで貼り付けたHTMLを記載するけど、
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #map { width: 300px; height: 200px; } </style> </head> <body> <section> <div><a href="/walk2eat">地図ページに戻る</a></div> <!-- b_block:id="entry" --> <h2 cms:id="title_plain"></h2> <div><!-- cms:id="content" /--></div> <div id="map"></div> <div> <a href="https://www.google.co.jp/maps/place/<!-- cms:id="title_plain*" /-->/@<!-- cms:id="lat" /-->,<!-- cms:id="lng" /-->,15z" target="_blank"> 大きな地図で<!-- cms:id="title_plain*" /-->の位置を確認する </a> </div> <div><a href="/walk2eat">地図ページに戻る</a></div> <script> function initMap() { var latlng = {lat: <!-- cms:id="lat*" /-->, lng: <!-- cms:id="lng*" /-->}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 14, center: latlng }); var marker_<!-- cms:id="entry_id" /--> = new google.maps.Marker({ position: latlng, map: map, title: '<!-- cms:id="title_plain*" /-->' }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=取得したAPI&callback=initMap"></script> <!-- /b_block:id="entry" --> </section> </body> </html>
cms:id="title_plain"、cms:id="lat"とcms:id="lng"は何度も使うので二回目以降はID名に*を忘れずに。
これで、詳細ページのコンテンツとして、
こんな感じの表示ができるようになりました。