地図の設置(webflow)

STUDY

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

kishioka yasuo

kishioka yasuo

ホームページの企画・制作・運営・管理を主業務とする岸岡デザイン事務所のブログです。

関連記事

最近の記事

ランキング

  1. 1

    パラパラと文字が上から落ちてくるモーショングラフィックス(After Effects)

  2. 2

    黒板にチョークで書いたような文字とイラストのアニメーション

  3. 3

    映像にシェイク効果を簡単に(Premiere Pro/Motion Array)

  4. 4

    テキストを3D表現で回転するアニメーションを作成(After Effects)

  5. 5

    マスクパスを【エフェクト/電波】でアニメーションさせる(After Effects)

最近の記事

  1. 筆の筆跡イメージを使って写真を簡単にマスクする方法(Affnity Photo)

  2. 文字を透明に切り抜く方法【Affinity Photo】

  3. Filmoraにお任せで編集してもらえるハイライト自動検出機能【Filmora X】

  4. パスに沿ってテキストを配置する方法【Affinity Photo】

  5. パターンレイヤーを使って簡単に背景を作る方法(Affnity Photo)

動画パーツの制作・販売

After Effects、Premiere Proによる動画パーツの制作・販売/YOUTUBE-STUDIO

グラフィックパーツの制作・販売

Photoshop、Illustrator等によるグラフィックパーツの制作・販売/Kishioka Graphic Studio

STUDIOで制作するWEBサイト

時短で低価格の本格的なホームページを『STUDIO』で制作

オリジナル雑貨をminne/BASEで販売

オリジナル雑貨をminne/BASEで販売中。/Zakka2251
kishioka yasuo

kishioka yasuo

ホームページの企画・制作・運営・管理を主業務とする岸岡デザイン事務所のブログです。

TOP