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

soycms_blog_map

/walk2eat/

どこに行ったかがすぐにわかるように、

地図を表示して簡単にマーカーを設置したいということになりまして、

Google Maps APIを利用したページを作ることになりました。

Google Maps APIに対応したSOY Appを作成しても良かったのですが、

作成直前で非常にめんどくさくなってきたので、

SOY CMSのブログを利用することにした。

はじめにGoogle Maps APIを利用できるように、

google_api_sign

Google API ConsoleでAPIキーを取得しておきます。

https://console.developers.google.com/?hl=JA

APIキーを取得できたら、SOY CMSの管理画面を開き、

カスタムフィールドかカスタムフィールドアドバンスドを有効にし、

soycms_map_custom

soycms_map_custom1

lat(緯度)とlng(経度)のフィールドを作成しておきます。

※サムネイルは次回以降に使用する予定です。

続いて、地図を表示するページを作成します。

soycms_map_blog

ページは諸々の設定が面倒なので、ブログページで作成しています。

ページを作成できたら、テンプレートの編集を開き、トップページのテンプレートを下記のHTMLで登録します。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

function initMap() {

  //拠点は下鴨神社
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 35.0387532, lng: 135.7707928}
  });

  <!-- b_block:id="entry_list" -->
  var marker_<!-- cms:id="entry_id" /--> = new google.maps.Marker({
    position: {lat: <!-- cms:id="lat" /-->, lng: <!-- cms:id="lng" /-->},
    map: map,
    title: '<!-- cms:id="title_plain" /-->'
  });
  <!-- /b_block:id="entry_list" -->
}

    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=取得したAPI&callback=initMap"></script>
  </body>
</html>

このコードは下記のサンプルページをSOY CMS用に改変しています。

Simple markers | Google Maps JavaScript API

function initMap(){の数行下にあるvar map = から始まる箇所では、

地図の中心とどれくらいズームして表示を開始するかを決めることが出来ます。

ズームはzoom : 8の数字を変更して、

中心は{lat: 35.0387532, lng: 135.7707928}の各数字を変更すれば良いです。

数字の調べ方は、中心にしたい箇所をGoogle Mapsで検索し、

gmap_shimogamo