update.こんにちは、y-okudaです。2017」の18日目を担当することになりました。レンタルサーバーの会社に勤めている人にはよくある話だと思いますが、知人から断るに断れないちょっとしたホームページの作成やらメンテナンスを頼まれることがあります。最先端の小難しい知識はスーパーエンジニアの皆さんにお任せするとして、Googleマイマップを自分のページに載せる際に、誰でもできるレベルのちょっとした見せ方の小技を備忘録的に記事にしておこうと思います。APIというものもあり、本来カスタマイズを色々と加えるのであればそちらの方が良いのかも知れませんが、一般にはなかなかハードルが高い部分もあると思いますので、GUIベースで簡易に地図を扱うのであればGoogleマイマップの方をお勧めしたいと思います。Googleのマイマップを新規に作成する必要があるのですが、そのあたりは一般的にいろいろと情報がありますので、本記事では割愛させていただきます。・週間アスキー「新Googleマップの「マイマップ」で地図作成&スマホで表示する方法」https://weekly.ascii.jp/elem/000/000/204/204179/ちなみに自分もライフログ的に”ここは憶えておきたい!”というようなグルメスポットや、ラウンドしたことのある全国のゴルフ場などをマイマップに記録しています。スポットの情報も、Googleのスプレッドシートで管理しているものをそのまま取り込んでマッピングできるため、メンテナンスも比較的容易です。”比較的”と言ったのは、本当はリアルタイムでスプレッドシートの情報をマップにも反映してくれると一番いいんですけどね。それは今のところやってくれないようで、マップも更新したい場合はレイヤーをそのつど作り直す必要があります。Mapでマイプレイスから呼び出したりできるのですが、自分のアカウントと登録したスポットの情報ががっつりひもづいているため、そのままURLなどを共有してしまうと別のアカウントから共有のリクエストができたり、他人のアカウントにその情報が取り込めたりしてちょっと面倒くさいことが起こりそうなので、単に情報を見せるためであれば、できればそういった面倒は避けておきたいところです。そこで利用したいのがGoogleマイマップををちょっと小細工して使う方法です。マイマップをページに表示してみる自身のページにマイマップを表示するには、マップの編集ページで「自分のサイトに埋め込む」メニューでiframeタグを表示し、コピーしてhtmlに1行記述するだけで表示することができます。Map上で一目でわかる、特にスマホやタブレットで使い勝手のいい地図です。</div></body></html>[そのまま表示したページ]表示することができました!簡単ですね。一応そのままペーストしただけでも表示はできましたが、そのままの表示では余白も多く、縁取りも太くてちょっと残念な感じがしますので、スタイルシートを記述してマージンなどについての修正を加えます。ついでに元データのリストへのリンクをフッターに仕込みます。</div>はい、これだけでフッター付きのマイマップを全画面表示にすることができました。[全画面表示したページ]ただ、ここでもう一つどうにかしたいのが上部にあるヘッダー部分です。Driveに取り込めたりしてしまいます。Mapsのオプションでこれを非表示にする方法はなさそうなので、ここで一つ小技を駆使してこれを消してしまいましょう。先ほどヘッダーに挿入したスタイルシートの#main部分の1箇所を変更するだけです。}完成したページ先ほど変更したパラメーターはブラウザ内の表示開始位置の指定で、マイナス位置を指定することによって実際には見えない位置から表示されていて、上下にスクロールしてもその部分が見えることはありません。表示されていたヘッダーは擬似的にずっと隠れた状態になります。これでPCでもスマホでもタブレットでも安全に公開できるマイマップが出来上がりました。今回サンプルに使用したページは参考までに下記URLで公開しています。色々なデバイスで使い勝手などを試していただければと思います。・讃岐うどんマップhttps://udonyasan.info/ただし、データは頻繁に更新していないのと、情報はあくまで個人の見解によるところが大きいためあらかじめご了承くださいということを申し添えておきます(笑)以上になります。生業としているつもりです。それだけではお給料がもらえず(涙)、レンタルサーバーはもとより、IaaS、PaaS等のクラウドサービスの企画・開発、それにまつわるビジネスモデルの設計、ISMS関連など、おかげさまで色々と修行させてもらっています。upLoginユーザーは見つかりませんでした。