Arale

アパレル、バリスタを経て未経験からのプログラマーになった男の勉強ログ

Google Map をJavaScriptで表示しよう

お店の位置情報を埋め込みで表示させたい

現在、作成しているオリジナルアプリケーションは店舗情報を必要としています。

来店されるお客様にも文字列だけの情報だけでなく、

マップを表示してより具体的な情報を提供したいです。

Googleの仕様変更により、ここ数年はクレジットカードの登録も必須となったみたいです。

昔はAPIキーすらいらない記事を拝見しましたが、10数年前の話なのであてになりません。

API取得、キー制約を設定、カード登録、ドメイン指定、コードを記述

上記の必要な情報を登録し、APIキーもコピーしました。

ところが、どんだけ記述してもポッカリと空白が発生する。

もしくは、空白すら領域にすら反映されませんでした。

CSSとHTML両方の記述が必要!?

数10種類のサイトから情報を得て、

コードも記入しましたが、表示されません。

CSS設定をしない限り、表示されない。

下記サイトの投稿でようやく判明しました。

めでたく表示はされましたが、表示したい店舗情報ではありません。

これから、表示したい店舗になるようコードを書き直します。

追記

Embed APIがアクセスマップとしては優秀だった

下記参考サイトに記載がある通り、簡潔に表示できました。

緯度を調整する方法は後日調べてみて発信したいと考えてます。

非常に参考にさせていただいたURL

mono96.jp

maps.multisoup.co.jp