住所からシンプルなGoogleMapを生成する | WEB制作の備忘録めもミフネWEB

入力された住所からGoogleMapを表示させようと思い、どうすれば一番楽かなと調べてみるとapiを使った方法ばかり出てきたのですが、今回は単純に地図を表示させたいだけなのでもっとシンプルでいいんだよと作りましたので備忘録に。

INDEX

Google APIを使わずにGoogle Mapを表示する
1. サンプル

Google APIを使わずにGoogle Mapを表示する

Google Maps Platform でAPI KEYを取得すると、ルート表示をはじめ様々なGoogleMapの機能を利用できるようになるのですが、利用状況に応じて費用が発生します。

ただしAPI KEYを使うやり方でも、インラインフレーム（iframe）型のplace表示なら無料で無制限に利用できます。それなら最初からiframeで良いのでは、、というのが今回の発端です。

サンプル

今回はjsで作りました。

<iframe id="gmap" width="700" height="350" title="GoogleMap"></iframe>

<script>
const address = "住所" ;
const gmap = document.getElementById('gmap');
gmap.setAttribute('src', 'https://maps.google.com/maps?q=' + address + '&amp;iwloc=A&amp;output=embed' );
</script>

あくまで指定された住所の地図を表示させるシンプルなものですが、クエリ（q=””）は複合条件が使えるのでq=”社名住所”ならきちんと社名で地図表示されます（GoogleMapに登録されている前提）。