cafemapにGooglemapを表示させる。

PHP学習記録

こんばんは!

今日はpaizaのLaravel入門編4を参考に、cafemapにGooglemapを表示させてみました。

ほぼほぼpaizaの動画の手順通り、進めて問題はないのですが、一か所変更しないと表示されない所があったので、これも情報共有しておきます:)

1. Google Developers Consoleにアクセスする

Google Developers Console
https://console.developers.google.com/

2. プロジェクトを作成を選択
3. Google APIが表示されたら、Google Maps APIから「Google Maps Embed API」を選択
4. 「有効にする」をクリック
5. 「認証情報を作成」をクリックして、「必要な認証情報」ボタンをクリック
6. 表示されたAPIキーを記録する

ここまではpaiza通りです。

そのあと、詳細画面( 私の場合、show.blade.php )に下のiframeタグで
Google API を入れ込んで地図を表示させるのですが。。

 
<iframe id='map' src='https://www.google.com/maps/embed/v1/place?key=AIzaSyCJBgcuCowQa5-V8owXaUCHhUNBN8bfMfU&q={{ $shop->address }}'
width='100%'
height='320'
frameborder='0'>
</iframe>

このpaizaのコードのままだと下のキャプチャのエラーがでてしまいました(>_<。)

そこでググりって導き出した解決策は、APIキーの後ろは「&q=」にします。

 
<iframe id='map' src='https://www.google.com/maps/embed/v1/place?key=AIzaSyCJBgcuCowQa5-V8owXaUCHhUNBN8bfMfU&amp&q={{ $shop->address }}'
width='100%'
height='320'
frameborder='0'>
</iframe>

そうすると、

こんな感じで、投稿された住所に合った地図が自動で表示されるようになりました!:)

そして背景画像を少し変えてこんな感じに。

StockSnapによるPixabayからの画像

何かの参考になれば嬉しいです♪

今週末はまた台風が迫ってきているみたいですね。

前回の台風の件もあるので、備えて、無理せず!

ですね。

大きな被害がでないといいなと思います。

台風小さくなれ!ナムナム。

今日も一日お疲れさまでした!

御覧頂きありがとうございました:)

カテゴリーPHP

コメントを残す

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

CAPTCHA