この記事は 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)
こちらで紹介している国土地理院のAPIを使えば、Google Maps APIを使わなくても会員登録不要でお手軽にジオコーディング＆逆ジオコーディングが可能です。
Google Maps API を使わなくても、会員登録不要でお手軽にジオコーディング＆逆ジオコーディングを行う方法があります。それは、国土地理院が公開してくれているAPIを使わせてもらうことです。 目次 国土地理院APIでお手軽ジオコーディング＆逆ジオコーディングジオコーディングAPI逆ジオコーディングAPINOTE嬉しいCORS許可テスト実行ひとことジオコーディングAPI場所の名称から緯度経度を取得します。 例:"札幌駅"で検索: GET https://msearch.gsi.go.jp/address-search/AddressSearch?q=%E6%9C%AD%E5%B9%8C%E9%A7%85 結果としてGeoJSONが返ってきます。 結果: [{ "geometry": { "coordinates": [141.354309, 43.063042], "type": "
今さらなのですが、API を利用して Google Maps Platform で地図を表示しているページでふとブラウザのコンソールをみてみると、こんなエラーが。 Starting February 21, 2024, google.maps.Marker will no longer be available. Instead, use google.maps.marker.AdvancedMarkerElement. Find more information about the discontinuation at https://developers.google.com/maps/deprecations. もしくは、以下の警告が表示される場合もあります。 As of February 21st, 2024, google.maps.Marker is deprecated. P
【Google Maps API】Markersが非推奨になったのでAdvanced Markersを使いましょう
この記事について Google のMaps JavaScript APIに仕様変更に度々苦しめられています。今回はMarkersに関することを仕様変更をまとめます。 先に結論を３つ Markerは地図上の特定の場所を示すために使用します。 アイコンや画像など様々な形で表現することが可能です。 2023年5月ごろからMarkersからAdvanced Markersにバージョンアップしました。これにより地図上のマーカーの見た目のカスタマイズが容易になるだけでなく、HTML および CSS を使った視覚的インパクトに優れるマーカーの作成に対応するようになり、柔軟性がアップしました。 Google Maps Platformとは google mapの機能を簡単にWebやスマホアプリに組み込むことができるAPIです。google mapのアプリで使用する位置表示やストリートビュー、また課金するこ
例によって、今回も備忘録です。 まず完成したものは、こちら このようなネイティブアプリを作ろうと思い地図を作りましたが、データを一回載せてみてみたくて、自分のサイトに乗っけてみました。 ローカルでの実装はテンプレ通りすぐできます。が、ビルドするためにエラーを消すのに一苦労でした。 環境 Next.js, TypeScriptのサイト Google Cloud PlatformでAPIを発行する GCPでMaps JavaScript APIを発行し、Keyを.envに入れる react-google-mapsで、実装したいモデルを探す イントロダクションを見て、インストール可能です。 Reactのバージョンが新しいと使えるコンポネントが違うので、一応読みましょう。 さっきコピったAPIKeyを入れれば、サンプルを見れます。 今回は、古地図のデータをSVGで用意し、マップ上に張り付けて透過さ
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/
@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ページを開く
Google Maps APIで50万以上使っていた話 - Qiita
Google Maps API のマーカー仕様が刷新されたので対処してみた
Nextのページで、react-google-maps/apiを利用して、オーバーレイマップを作る
Google Maps API キーをHTMLから隠す方法 - Qiita