GoogleMapを表示させる方法
WebページにGoogleMapを表示する方法についてまとめます。
- iframeを使う
- javascriptを使う
1.iframeを使う方法
WebブラウザでGoogleMap検索するときとほとんど同じ流れで地図の埋め込みソースを取得することができるので、非常に簡単な方法です。
ただしHTMLの知識は若干必要になりますので要注意です。
手順1.Webブラウザで地図検索
任意のブラウザでGoogleの地図検索ページを開き、マップに載せたい場所を検索します。
手順2.地図検索の左側にあるメニューのハンバーガーメニューをクリック

手順3.「地図を共有または埋め込む」を選択

手順4.「地図を埋め込む」タブを選択し、表示されたHTMLをコピー

手順5.コピーしたHTMLソースを自分のWebページの任意の場所に埋め込み
コピーしたiframeタグを埋め込みます。サイズなどを調整したい場合は、手順4で修正できます。
2.javascriptを使う方法
ただGoogle MapをWebページを埋め込むだけでなく、自分でピンを好きな位置に立てたり、いろいろとカスタマイズする際には、Google Map API というGoogleが用意しているAPIを使用する必要があります。
APIを使用するためには、まずGoogleアカウントを取得し、その後WebページからAPIを呼び出すためのAPI Keyを取得する必要があります。
手順1.Googleアカウントの作成
Googleアカウントを作成します。
手順2.API Key の取得
GoogleDeveloperのサイトに行き、APIキーを取得します。
手順3.以下のスクリプトを作成
<script src="https://maps.googleapis.com/maps/api/js?key=XXXXX&language=ja&sensor=false&v=3.exp"></script>
<script>
var lat = 35.689611;
var lng = 139.6983826;
var latlng = new google.maps.LatLng(lat,lng);
var options = {
zoom:15,
center: latlng,
myTypeId: google.maps.MapTypeId.ROADMAP
}
new google.maps.Map(document.getElementById("map"),options);
</script>
〜省略〜
<body>
<div id="map"></div>
</body>
XXXXXのところにAPIキーを入れます。
divタグのid(上のサンプルではmap)と、「new google.maps.Map(document.getElementById(“map”),options);」の指定IDを同じにするように注意。
lat,lngは緯度経度の変数。自分が表示したい場所の緯度経度を指定する。