Googleマップの埋め込み(その2:HTMLペーストで埋め込む方法)

マップを埋め込む方法として、GoogleマップのHTMLタグをペーストするというやり方もある。いずれにしても操作はさほど煩雑ではないので安心だ。

まずはGoogleマップのページで埋め込み用のHTMLコードを入手するところから始める

プレビュー画面でHTMLをコピーする

まず、Googleマップにアクセスし、目的地を地図上に表示する。ここで画面にあるリンクマークを開くと、埋め込み用の地図をカスタマイズできる画面に飛ぶので、表示したい地図の大きさをカスタムする。すると埋め込み用のHTMLコードがページ下部に表示される。このHTMLを全選択して、コピーしておく。次にMuseの画面に戻り、メニューバーから「編集」→「ペースト」を選択しよう。すると先ほどコピーしたHTMLタグがページ上にペースとされ、すぐにマップのプレビューが現れる。今度はしっかりと日本語の地図で表記され、一安心である。

先ほどコピーしたHTMLをペーストする。「編集」→「ペースト」でOK

日本語表記のマップを埋め込むことができた

Twitterシェアボタンの埋め込み

埋め込み機能では、GoogleマップのほかにもYouTubeの動画、Twitterボタン、Facebookの「いいね!」ボタン、PayPalの購入ボタンなど、各種ソーシャル系のウィジェットに対応している。せっかくなので、このページにTwitterのボタンも追加してみることにしよう。

Googleマップと全く同じ手順で、Twitterもあっという間に埋め込むことができる

「ウィジェットを挿入」から「ソーシャル」→「Twitter ツイート」を選択し、ドラッグ。Googleマップと全く同じ手順で、Twitterのボタンを埋め込む事ができた。オプション設定を開くと、デフォルトの状態ではAdobeのサイトがセットされているのでURLを自分のWebサイトアドレスへ書き換えよう。ツイートの内容も予め設定することができるので、記入をしておく。

さあ、これで設定は完了。Twitterウィジェットが機能しているかをページをパブリッシュして確かめてみることに。完成したページを開くと、アイコンが無事に表示されている。クリックすると、別ウィンドウでツイートの画面が開かれ、先ほど設定した文章とURLもしっかり反映されていた。

詳細設定でツイート欄に表示するURLや、デフォルトの文章なども反映させることができる

このように、ものの5分ほどでウィジェットの設定ができる機能は実に頼もしい。初心者がつまづきやすいような作業が、MuseではHTMLの知識がゼロでも手軽に実装することができる。MuseでWeb制作をする人には、ぜひ試してみてほしい機能だ。