FrontEnd

WebページにGoogleMapを配置する

投稿日:

はじめに

ページの中で特定の場所のマップを表示したい場合、Google Maps APIを利用すると簡単に表示することができます。
今回はGoogle Maps JavaScript APIを利用して東京駅周辺の地図を表示してみます。

準備

Googleマップを利用するためにはAPI Keyが必要です。

API Keyを取得する

こちらのページの「キーの取得」ボタンをタップしてキーを取得します。

ダイアログが表示されたらプロジェクト名を入力して「Yes」を選択し、「CREATE AND ENABLE API」ボタンをタップします。
その後、発行されたキーをメモします。

簡単な実装

東京駅周辺のマップを表示するページを作成してみます。

サンプルコード

「uluru」に設定した緯度、経度を中心にマップが表示されます。
「zoom」に設定した値によりマップの拡大度合いが変化します。

タップした位置にマーカを動かす

画面タップ時のコールバック関数を定義して、クリックした場所にマーカを移動させてみます。

サンプルコード

 

場所を検索する

入力した文字を元に場所を検索してみます。

サンプルコード

 

画面例

最後に、これまでに記載した内容を実際にこのページに組み込んでみました。
テキストボックスにキーワードを入力して「検索」ボタンをクリックするとマップが更新されます。


さいごに

Google Maps JavaScript APIを利用してWebページにGoogleMapを配置してみました。
無料で取得できるAPI Keyの場合1日あたりの表示回数に制限がありますが、PV数が多くない場合は無料でも十分使えると思います。

page_footer_responsive




-FrontEnd

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

1 はじめに2 Vueインスタンス3 プロパティとメソッド4 インスタンスライフサイクルフック5 フィルター6 算出プロパティ6.1 例文6.2 算出プロパティを使用した書き換え6.2.1 HTML6 ...

icon

TypeScript初心者が押さえておくべき型システム

1 はじめに2 型アノテーション2.1 プリミティブ型2.2 リテラル型2.3 any2.4 nullとundefined2.5 ユニオン型2.6 交差型2.7 タプル型2.8 列挙型2.9 配列2. ...

Vue.jsでWebアプリケーションを作る〜Vue.jsの基礎〜

1 はじめに1.1 Vue.jsとは1.2 インストール1.3 Vueアプリケーションを作る2 データを表示する2.1 文字列を表示する2.2 HTMLで表示する3 属性を指定する3.1 インラインス ...

react-icon

[React初心者]カスタムフックについて学ぶ

1 はじめに2 Ract Hook(フック)とは3 カスタムフックの実装3.1 フックのルール3.2 カスタムフック3.3 カスタムフックの実装4 さいごに5 おすすめ書籍 はじめに 今回はReact ...

react-icon

React Hook Form (v7) とMUI (v5) だけでバリデーションを実装

1 はじめに2 バリデーションエラーをMUIのhelperTextに表示する2.1 バリデーション実装の全体感3 他のフィールドに関連するバリデーション4 CodeSandbox5 さいごに6 おすす ...

フォロー

blog-page_side_responsive

2017年8月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。