SOY CMSのブログで地図アプリを作ろう2で


soy_blog_map_kotobuki

/walk2eat/


マップを表示させたブログトップページで詳細ページへのリンク付きのインフォウィンドウを表示できるようにした。

ここの記載されているリンクから詳細ページへ遷移するわけだけど、


詳細ページでも


soy_blog_map_kotobuki1

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名に*を忘れずに。


これで、詳細ページのコンテンツとして、


soy_blog_map_kotobuki1


こんな感じの表示ができるようになりました。