2022年8月19日金曜日

ブログへのマップの埋め込み

再び、ブログを使ってのサイトリニューアルの話になりますが、以前のサイトには訪れたスポット周辺の地図を画像で切り取って埋め込んでいたんですね。
周辺のお城の位置関係や、古戦場などの史跡との位置関係が解りやすいですし。
で、最初は新しいブログにGoogleMapを埋め込もうとしたんですが、これだと1つのスポットしか表示できないんですよね。(複数表示のやり方はありそうな気がしますが・・・)
なので、マイマップ機能を使う、というのは以前に書きました。
しかし、マイマップをただ埋め込んだだけだと、最初に登録したスポットがデフォルトになっていて、紹介するスポットを表示できないんですよ。
そこで、ひと工夫。
まずサイトにマイマップを埋め込みます。
 
 
上の画像の右上、縦の「・・・」から、自分のサイトに埋め込むを選択します。
すると、埋め込むURLが下のように表示されるので、コピー。
 
 
ブログをHTML編集モードにして、お好きな所に貼り付けます。
ここまでは簡単ですが、上に書いたようにデフォルトの場所(一番最初に登録したものかな?)になるんですよね。
ここからが工夫ポイント。
強制的に経緯度を指定します。
上の画像のURLのwidthとかheightとか表示パラメータの前の部分のURL本体の最後に、「&=ll」で繋いで経緯度挿入。
この場合だと、最後の部分は「(省略)&ehbc=2E312F」ですね。
この最後文字「F」と「"」の間に「&ll=」を入れ、スポットの小窓から経緯度をコピペしてきます。
 
 
これでスポットの位置でマイマップが表示されるようになるんですが、さらにもうひと工夫。
周辺の城の位置関係を表示させたいので、縮尺を変えます。
縮尺は経緯度に続いて「&z=」で繋いでいくんですが、この「z」後に0~22の数字を入れ縮尺を変化させることが可能なんですね。
色々試した結果、お城の位置関係を示しつつ周辺の地図もほどよく表示させる為、13という縮尺パラメータにしました。
これで完成!
こんな感じで表示されます。
 
 

0 件のコメント:

コメントを投稿