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-pho024-03

    ビューティーコレクション/オーバーレイ9種(Filmora)

    ビューティーコレクション/オーバーレイ9種(Filmora); from yasuo kishi…

  2. chart-cartoon-film2-1

    Keynoteでグラフアニメーション/3D編(Keynote)

    Keynoteでグラフアニメーション/3D編(Keynote); from yasuo kish…

  3. filmora-pho014-01

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

    トランジション「ベーシック編6(終) 」(Filmora) from yasuo kishiok…

  4. photoshop-art005

    Photoshop Art 005

  5. webflow015-01

    フレックスボックスの設定(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いていきます。今回はフレックスボ…

  6. filmora032-01

    26種類のフレームオーバーレイ(後半)(Filmora)

    26種類のフレームオーバーレイ(後半)(Filmora) from yasuo kishioka…

  7. webflow004-01

    Div Blockの使用(webflow)

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

  8. webflow009-01

    タブの使用(webflow)

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

PAGE TOP