« 隠居の散策：泉北ニュータウン近辺の梅見（３）和泉リサイクル環境公園 | Main | 隠居の散策：泉北ニュータウン近辺の梅見（４）花の文化園 »

2019年2月28日

隠居のPC備忘録：ブログにGoogle Mapsで検索した地図を貼り付ける

ブログに訪問記録の記事をアップロードするときなど訪れた場所の地図を表示したい時がある。
　このような作業は、ちょっと前はむつかしい作業だったが、今は Google のアプリを使えば非常に簡単になっている。方法を備忘録として記録しておきたい。
　例として、先日行ってきた河内長野市にある花の文化園の地図を掲載してみる。

  1. Googleアプリの【マップ】を開く。
  2. Chrome なら新しいタブを開いたときに表示されるアプリ一覧から選択できる。 Microsft Edge なら、【Google map】で検索する。

  3. 【マップ】左上の検索窓に、【花の文化園】と入力し検索すると下のように【花の文化園】にマーカーが立った地図となる。自宅から車で26分といった表示が見えるが。どのように計算しているのか定かではないが、ほぼ合っている。

    190210_011.jpg

  4. この地図の左フレームにある（共有）をクリックすると次のような画面となるので【地図を埋め込む】をクリックする。

  5. すると次の画面となるので、【HTMLにコピー】をクリックすると枠内のコードが反転するので、これをコピー（Ctrl+C）して、ブログにペーストすればよい。

    　ちなみに、ここで表示されるHTMLコードは、次のようなものである。
    
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3290.660456583079!2d135.55117071497688!3d34.43537890488984!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000d44580013e17%3A0x243e9b724b8b5558!2z6Iqx44Gu5paH5YyW5ZyS!5e0!3m2!1sja!2sjp!4v1551228350226" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

　これを応用して、【花の文化園】の地図を、このページに貼り付けたものが下図である。枠をつけるとか、地図をページの中央部にもってくるというような装飾をしているが、Google マップで検索したときの地図のように、航空写真表示にしたりするなどの機能が動いている。

タグ:

Category : Google, Google Map, PC | Comments [0]

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)