GoogleMapを表示させる方法まとめ

GoogleMapを表示させる方法

WebページにGoogleMapを表示する方法についてまとめます。

iframeを使う
javascriptを使う

1.iframeを使う方法

WebブラウザでGoogleMap検索するときとほとんど同じ流れで地図の埋め込みソースを取得することができるので、非常に簡単な方法です。
ただしHTMLの知識は若干必要になりますので要注意です。

手順１．Webブラウザで地図検索

任意のブラウザでGoogleの地図検索ページを開き、マップに載せたい場所を検索します。

手順２．地図検索の左側にあるメニューのハンバーガーメニューをクリック

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

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

手順５．コピーしたHTMLソースを自分のWebページの任意の場所に埋め込み

コピーしたiframeタグを埋め込みます。サイズなどを調整したい場合は、手順4で修正できます。

２．javascriptを使う方法

ただGoogle MapをWebページを埋め込むだけでなく、自分でピンを好きな位置に立てたり、いろいろとカスタマイズする際には、Google Map API というGoogleが用意しているAPIを使用する必要があります。
APIを使用するためには、まずGoogleアカウントを取得し、その後WebページからAPIを呼び出すためのAPI Keyを取得する必要があります。

手順１．Googleアカウントの作成

Googleアカウントを作成します。

手順２．API Key の取得

GoogleDeveloperのサイトに行き、APIキーを取得します。

手順３．以下のスクリプトを作成

<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は緯度経度の変数。自分が表示したい場所の緯度経度を指定する。