タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
この記事は Wano Group Advent Calendar 2019 の7目の記事となります。 アドベントカレンダーに「なにか」書くといって7日を予約していたんですが、特にネタを考えてなかったら、前日にネタが降ってきたという話です。 ※後日談を追加しました(2019/12/15) 始まりは経理担当者のSさんの指摘 ちょうど昨日(12/06)のことです。経理担当者のSさんに「Google Cloud Service から38,653円がクレジットカードの明細にあるのですが、証憑がないんですが…」と相談を受けました。月初は会社に対する請求の確認作業があり、請求書がない引き落としとかは問題になりますので、たまに確認されることがあります。 新しくサービスを開始する際に、AWSやGCPとか有料サービスのアカウントを新しく作る必要があったりすると、そんなことが起きたりします。要は経理担当にメール
[React + Google Maps API] @react-google-maps/apiを使った地図アプリをローカルで起動してみた | DevelopersIO
[React + Google Maps API] @react-google-maps/apiを使った地図アプリをローカルで起動してみた こんにちは、CX事業本部の若槻です。 Google Maps APIのReact向けライブラリは現在アクティブなものでもいくつか種類がありますが、そのうちのひとつに@react-google-maps/apiがあります。リポジトリやドキュメントは下記となります。 @react-google-maps/api - npm JustFly1984/react-google-maps-api: React Google Maps API React Google Maps Api Style Guide この@react-google-maps/apiは、前回の記事で紹介したものに比べてより頻繁にアップデートが行われているようです。 今回は、@react-g
![[React + Google Maps API] @react-google-maps/apiを使った地図アプリをローカルで起動してみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c4bbfc30d9c579c165e2970097d822f63f8c0aa/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2021%2F02%2Fgoogle_map.jpg)
例によって、今回も備忘録です。 まず完成したものは、こちら このようなネイティブアプリを作ろうと思い地図を作りましたが、データを一回載せてみてみたくて、自分のサイトに乗っけてみました。 ローカルでの実装はテンプレ通りすぐできます。が、ビルドするためにエラーを消すのに一苦労でした。 環境 Next.js, TypeScriptのサイト Google Cloud PlatformでAPIを発行する GCPでMaps JavaScript APIを発行し、Keyを.envに入れる react-google-mapsで、実装したいモデルを探す イントロダクションを見て、インストール可能です。 Reactのバージョンが新しいと使えるコンポネントが違うので、一応読みましょう。 さっきコピったAPIKeyを入れれば、サンプルを見れます。 今回は、古地図のデータをSVGで用意し、マップ上に張り付けて透過さ
Google Maps APIを使ってマーカーを立ててサーバーレスなAPIで保存する | DevelopersIO
Google Maps JavaScript API(自分でGoogle Mapを使って色々出来るやつ)を使い、Mapをクリックしてピンを立て、ブラウザリロード後も状態を保持するWebアプリケーションを作ってみたくなったので、Serverlessな感じで作ってみました！ 入社時健康診断結果について話があると産業医の先生に呼び出されてビクビクしている、もこ@札幌オフィスです。 …さて、Google Maps JavaScript API(自分でGoogle Mapを使って色々出来るやつ)を使い、Mapをクリックしてピンを立て、ブラウザリロード後も状態を保持するWebアプリケーションを作ってみたくなったので、Serverlessな感じで作ってみました！ 構成イメージ API GatewayとLambdaとDynamoDBを利用するシンプルなサーバーレス構成です。 Google Maps Jav
Google Maps APIで表示しているマーカーを切り替える
昨日jsonのデータを使ってGoogle Mapsにマーカーを設置する記事を掲載しましたが、このマーカーをカテゴリ毎に絞り込めるようにしてみます。 サンプルコード ベースとなるコードはこちらの記事を参照ください。 まずはjsonファイルにカテゴリの項目を追加します。 { "data": [ { "name": "AKIBAカルチャーズZONE", "latlng": { "lat": 35.699519, "lng": 139.770388 }, "category": ["a","b"], "icon": "a" }, { "name": "秋葉原ガチャポン会館", "latlng": { "lat": 35.701861, "lng": 139.771220 }, "category": ["b"], "icon": "b" }, ～ 略 ～ { "name": "コミックとらのあな秋
Maps JavaScript API を使うとき、APIキーが心配 【ご注意】本件の記事は、「HTTP リファラー（ウェブサイト）」による制限を否定するものではありません。Google 公式が推奨しているとおり、リファラー（ウェブサイト）による制限は必須です。それに加えAPIキーを公開しない方法が無いものかと考えたのがこの記事です。 Google は、公式サイトで API キーをコードに直接埋め込まないでくださいと言っている割には、[公式サンプル]のコーディングが以下の様になっていて、堂々とHTMLの中にYOUR_API_KEYが登場している。 これでwebページ作ったら世界中にAPI キーを公開してしまうことになる。まるで、堂々とフリチンで公道を歩いている様な状態。公式サンプルは裸の王様か？ <script defer src="https://maps.googleapis.com/
Google Maps APIについて業務で使うことになったので予習もかねて使い方をまとめておきます。 動作環境 Maps JavaScript API version 3.37 コンストラクタ google.maps.Map(mapDiv:Node, opts?:MapOptions ) Node 地図を表示する位置を指定します。 DIV要素でマップを配置する場所を用意しておいて、document.getElementById()を利用してその要素への参照を渡してあげます。 MapOptions 地図を表示する際のオプションを指定します。 オプションには、centerとzoomは必須項目となっています。 centerには座標を指定します。 zoomには0~22までのズームレベルを指定します。 具体的なズームレベルについては以下の記事が参考になります。 Google Maps APIのズー
@react-google-maps/apiを使った地図アプリでマーカーとバルーンの位置関係をいい感じに表示する | DevelopersIO
こんにちは、CX事業本部の若槻です。 前回の記事では@react-google-maps/apiの基本的な動作をReactアプリを実際に起動して確認しました。 今回は、@react-google-maps/apiを使った地図アプリでマーカーとバルーンの位置関係をいい感じに表示する方法を確認してみました。 やりたいこと 下記のように指定の座標位置に配置されたマーカーの上部にバルーンを表示し、マップの拡縮をしてもマーカーとバルーンの相対位置が変わらないようにしたいです。 やってみる 環境作成 前回の下記記事で作成した環境があればそのまま利用可能です。 [React + Google Maps API] @react-google-maps/apiを使った地図アプリをローカルで起動してみた | DevelopersIO 未作成の場合は下記コマンドを実行してReactプロジェクト作成とパッケージイ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![[石川温の「スマホ業界 Watch」] 「Googleメッセージ」が日本で本格展開へ、消えるiPhone「iMessage」との垣根](https://cdn-ak-scissors.b.st-hatena.com/image/square/62ac43d02a1c551ecfdcc457555764b1bee3214b/height=288;version=1;width=512/https%3A%2F%2Fk-tai.watch.impress.co.jp%2Fimg%2Fktw%2Flist%2F1594%2F180%2F77.jpg)
Google Maps APIで50万以上使っていた話 - Qiita
Nextのページで、react-google-maps/apiを利用して、オーバーレイマップを作る
Google Maps API キーをHTMLから隠す方法 - Qiita
Google Maps APIの使い方 - Qiita
president.jp
jetstream.blog
smhn.info
youtu.be
x.com
togetter.com