menu

地図の設置(webflow)

webflowを使用してのサイト制作を進めながら学習したことを書いていきます。
今回は[map]の紹介になります。

■設置手順

1/地図を追加する
2/APIキーの作成
3/地図の設定
4/地図のスタイリング

◎Components/[Map]をドラッグして、画面上に配置します。

webflow007-02

◎Add API Keyを取得します。

webflow007-03

<Googleサイト上での作業>
■APIキーを生成する。
Google Maps JavaScript APIキーを作成して有効にする手順は次のとおりです。
1/移動し、GoogleマップのJavaScript APIのドキュメント。
2/[ キーを取得 ]ボタンをクリックします。
3/新しいプロジェクトを作成するか、ドロップダウンを使用して既に作成したプロジェクトを選択します。
4/[ Create and Enable API link]をクリックします
5/あなたのApi Keyフィールドの下に生成されたAPIキーをコピーします。
6/Finishをクリックします。

■プロジェクトにAPIキーを貼り付ける。
APIキーをクリップボードにコピーしたので、これをプロジェクトに追加する必要があります。
1/あなたのプロジェクト設定に行く
2/[ 統合]タブに移動します
3/Googleマップのセクションまでスクロールします
4/Google Maps JavaScript API KeyフィールドにAPIキーを貼り付けます
5/[ 変更を保存 ]ボタンをクリックします。
6/サイトを公開する

■Googleにプロジェクトを登録する
Maps APIを有効にするには、プロジェクトを登録する必要があります。プロジェクトを登録してMaps APIを有効にするには、次の手順を実行します。
1/Googleデベロッパーコンソールに移動します
2/APIを有効にするプロパティを選択します。
3/左側のサイドバーの[ ライブラリ ]タブをクリックします
3/Google Maps APIセクションの下でGoogle Maps Javascript APIをクリックします
4/[ 無効 ]ボタンが表示されている場合は、APIが有効になっていることを意味します。[ 有効にする ]5/ボタンが表示されたら、そのボタンをクリックしてプロパティのAPIを有効にします。

◎Add API Keyの取得が確認されると画面のように絵柄が変わります。

webflow007-04

◎地図の設定を行います。
・アドレス – 住所または一般的な場所を入力します。
・ツールチップ – マップピンの上に表示されるテキストを指定することができます。
・ズーム – マップの拡大率を設定します。0は大きな領域を表示し、18は設定した場所を拡大表示します。
・マップタイプ – 道路、地形、衛星、ハイブリッドの4種類のマップから選択できます。
・スクロールホイール -スクロールホイールまたはトラックパッドの動きをスクロールすると、マップがズームインおよびズームアウトされます。この動作をしたくない場合は、チェックを外してください。
・タッチドラッグ – これは、タッチデバイスの地図上のパンやズームのような2本指のタッチジェスチャを有効または無効にします。

webflow007-05

▽サンプル
live-preview

▷Adobe Museでホームページの制作/岸岡デザイン事務所
http://y-kishioka.com

▷Movie Web Magazine/KISHIOKA.DESIGN
http://kishioka.design

webflow006-01ListとList Itemの使用(webflow)

webflow008-01リッチテキストの使用(webflow)

関連記事

  1. filmora-pho006-01

    テキスト「エンディング編」(Filmora)

    テキスト「エンディング編」(Filmora); from yasuo kishioka on V…

  2. xd005

    自動アニメーションで目を左右に動かしてみる(Adobe XD)

    バージョン13.0から搭載された「自動アニメーション」を使って、イラストの目をボタンで左右に動か…

  3. filmora-pho012-01

    トランジション「ベーシック編4」(Filmora)

    トランジション「ベーシック編4」(Filmora); from yasuo kishioka o…

  4. dimension001

    コーヒーカップを作る(Adobe Dimension CC)

    Adobe Dimension CCを使って、コーヒーカップのシーンを作りました。コーヒーカップ…

  5. webflow001-01

    ナビゲーションの設置。(webflow)

    サイト制作を進めながら学習したことを書いていきます。◎Componets/Navbar を画…

  6. webflow008-01

    リッチテキストの使用(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いていきます。今回はの紹介になり…

  7. filmora-pho026-03

    ビジネスコレクション/トランジション11種(Filmora)

    ビジネスコレクション/トランジション11種(Filmora); from yasuo kishi…

  8. filmora-pho004-01

    テキスト「テロップ編」(Filmora)

    テキスト「テロップ編」(Filmora); from yasuo kishioka on Vim…

PAGE TOP