Ivy SOHO.net

Google Maps表示は、緯度経度がわかっている場合は以下のソースをテンプレートに埋め込みます。

    <style>
       #map{code} {
      	border:solid 1px #666;
        height: 350px;
        width: 100%;
				background-color: grey;
       }
    </style>

    <div id="map{code}"></div>


   <script>
      // This example adds a marker to indicate the position of Bondi Beach in Sydney,
      // Australia.
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map{code}'), {
          zoom: 15,
          center: {lat: {lat}, lng: {lng}}
        });

        var image = '{site_url}/images/maps/icons/icon_{data_type_mst_disp}.png';
        var beachMarker = new google.maps.Marker({
          position: {lat: {lat}, lng: {lng}},
          map: map,
          icon: image
        });
      }
    </script>


		<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=キー&callback=initMap">
    </script>

Geeklog では、dataBoxからMapsプラグインへデータを移行させる機能があり、その際に、dataBoxのデータに緯度・経度が格納されます。

事例

• 鶴見宅建協会
• マウンテン