この掲示板を便利&快適に利用する方法などをご紹介
Information Poh!
閉鎖
アバター
tani-p
記事: 1400
登録日時: 2012年10月13日(土) 14:53
お住まい: 4koku Island
連絡する:

”GoogleMaps”も貼り込みできるようにしました!

投稿記事 by tani-p »

投稿画面に「googlemaps 」のボタンを追加して、”GoogleMaps”も貼り込めるようにしました。

これは、カスタムBBコードを埋め込んで実装しています。
  • 幅はトピック幅イッパイでカッツケにしました。※設定できません。
  • 高さは自由に設定可能にしましたが、300 ~ 800 (単位:ピクセル)程度で使ってください。
◆定義は、以下のようになります。

[googlemaps]高さ,マップのURL[/googlemaps]

◆実際の設定は、以下のようになります。 ※高さ300ピクセルの例です。

コード: 全て選択

[googlemaps]300,https://maps.google.co.jp/maps/ms?msa=0&msid=205400483684527644933.0004c5b62375b01ad06ed&brcurrent=3,0x0:0x0,0&ie=UTF8&t=h&ll=15.694442,120.245361&spn=1.586464,1.612244&z=9&output=embed[/googlemaps]
◆上のコードはこんな感じで表示されます。



長いURLは、GoogleMapsからの抜粋です。

このコードを取得するには、GoogleMapsの「鎖の輪っか」のアイコンから、”埋め込み地図のカスタマイズとプレビュー” で、地図のサイズをカスタムにして、倍率と、高さを表示したい場所にして、”サイトに地図を埋め込む場合はこの HTML”の src="(ここの部分)"を抜粋します。

具体的には、”https://maps.google.co.jp |(途中省略)|output=embed” までとなります。

そのまま、GoogleMapsからURLをコピーすると、URLの一部が、& になっているので、amp; を削除してください。

つまり、せっかくの特殊文字(HTMLのエスケープ文字)& を & だけに置換します。 ※複数箇所あります。

こうやって書けば簡単ですが、BBCodeの右も左も判らなかったので実装には結構苦労しましたよ。(大汗;

===
GoogleMapsからのURLのコード取得は、色々なサイトで紹介されているので省略しています。
閉鎖