Google Maps Embed APIの検索クエリを最適化

WEB制作
Google Maps Embed APIの検索クエリを最適化

Google Mapsの有料化によって、気軽にMaps JavaScript APIを使用することができなくなってしまったので、無料で使用できるMaps Embed APIを代用で使っています。

目次

使用方法

Google Maps Platformに登録し、API Keyを発行した後、下記のようなコードを埋め込むだけです。 マップを埋め込むだけなら、カスタマイズ性は落ちますが、店舗の地図を掲載するには十分だと思います。

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=検索クエリ（住所or施設名or座標）
    &zoom=17" allowfullscreen>
</iframe>

検索クエリの最適化

Maps JavaScript APIと似たような表示ができるMaps Embed APIですが検索クエリに癖があります。

まず、クエリに店舗名を使用した場合、当たり前といえば当たり前ですが、googleマップに登録されている店舗は掲載されますが、登録されていない店舗は表示ができません。 逆に、住所で指定した場合、近くの別の建物やお店が表示されたりしてしまいます。 座標を使用すれば、きっちりと表示できますが、左上の詳細欄に入力した座標が表示され、ユーザーにバグってんのかな？って思わせてしまうぐらいブサイクになっちゃいます。

これらを回避するために、僕は次のような検索クエリを編み出しました。 それは、≪ 住所 + 店舗名 ≫です。

弊社を例として挙げると

「岡山市北区西古松2-26-22 上杉第8ビル105 ウェブティ株式会社」

となります。

Maps Embed APIの検索クエリは、キーワードの順番も検索結果にある程度影響しているようで、住所、店舗名の順番でクエリを発行するといい感じに表示してくるようになります。