GoogleMapで現在地を取得する用のComponentを作る

[kCat-fun]

Why

お店の住所を登録するため
（正確には座標からマップへ遷移するためのURLを生成するため）

What

技術検証のコードをiframe等で埋め込みで頑張る方針

[kCat-fun]

とりあえず、APIの制限のせいでサーバー上で動かない問題を、クレカ情報ツッコんでGoogle Cloudの無料試用することで制限の設定を変更することで解決
↓こんな感じに動くぞ
https://portfolio.kcat.dev/t/GoogleMaps.html

[kCat-fun]

親コンポーネントから値とれたぁぁ
これで自由自在に使えるぜ
感動すぎる

[kCat-fun]

Mapの表示

<GoogleMap class="map" width=300px height=500px />

値の取得

getPos() {
    const lat = localStorage.getItem("lat");
    const lng = localStorage.getItem("lng");
    localStorage.removeItem("lat");
    localStorage.removeItem("lng");
    console.log("Mapから来た値");
    console.log(lat, ",", lng);
}

[kCat-fun]

スマホで上手く表示されない問題が発生
buildしたら動く可能性もあるため、とりあえず、このまま進める

[kCat-fun]

ちょっとこの作業飽きてきたから、一旦放置してUI用のコンポーネント作成する

[kCat-fun]

何かdeployしてみたら動いたのヨシっ👈
https://hinnyari-album.web.app/

[kCat-fun]

感動

[kCat-fun]

急に動かなくなった
@uwatcha メンターに相談して解決を頼んだ

[kCat-fun]

firebaseでdeployする際に自動生成されるフィアルがpublicに紛れ込んでいたのと、APIをたたいているhtmlファイルをdeployし直したら直った！！
感動！！神！これぞ青天の霹靂！