トップ Web API Google Maps

Google Maps―ホームページ埋め込みはiframeは無料、カスタマイズは有料APIで。

ご存知の通り、Google Maps（マップ）は、検索エンジンに並んで生活に必要なツールになりつつあります。Googleマイビジネスで店舗の情報を掲載したり、口コミユーザとしてローカルガイドのランキングを上げたりと地図の利用以外にも幅が広がっています。ホームページへのGoogle Mapsの埋め込み方法などGoogle Mapsに関連した情報を解説していきます。

▲記事トップへ

目次

この記事の目次です。

1. Google Mapsとは
2. iframeなら無料でホームページへの埋め込み可能
3. カスタマイズする場合はAPI利用（条件により有料）
4. APIキーの取得方法
5. APIを利用したホームページへの埋め込み方法
6. APIでマーカーを表示する方法
7. APIで吹き出し（情報ウィンドウ）を表示する方法
8. APIでブラウザのレンダリングを妨げない実装方法
9. APIで2地点間のルートを表示する方法

更新履歴

1. Google Mapsとは

Google Mapsとは、Googleがインターネットを通して提供している地図、ローカル（地域）検索サービスです。 Googleマイビジネスで店舗の情報を掲載したり、口コミユーザとしてローカルガイドのランキングを上げたりと地図の利用以外にも幅が広がっています。

2. iframeなら無料でホームページへの埋め込み可能

iframeでGoogle MapsのURLを表示する場合は無料でホームページに埋め込むことができます。

埋め込み方法

埋め込み方法は簡単で表示したい＜Google MapsのページのURL＞をコピーして以下のように記述するだけです。 iframeタグをCSSで調整すれば大きさや枠などホームページに合わせてきれいに調整できます。

<iframe src="＜Google MapsのページのURL＞"></iframe>

東京駅周辺のGoogle Mapsを埋め込む例

以下はGoogle Mapsで「東京駅」と検索した結果のページを表示する例です。 

<iframe src="https://maps.google.co.jp/maps?output=embed&q=東京駅"></iframe>

3. カスタマイズする場合はAPI利用（条件により有料）

Google MapsはAPIを使用することでカスタマイズが行えます。

APIキーの取得が必要で、一定の利用まで無料ですが、それを超えるとリクエスト数などに応じた従量課金が発生します。 APIキーを取得するには、クレジットカードの登録が必要になります。

Google Maps APIとは

Google MapsをカスタマイズすることができるAPIです。 GoogleアカウントでGoogle Maps Platformを有効にすることで使用できます。 公式サイトは以下です。

https://cloud.google.com/maps-platform/?hl=ja

Google Maps API 公式サイトイメージ

Google Maps Platformの1カ月あたりの無料利用枠

Google Maps Platformは1カ月あたりの無料利用枠で$200（地図読み込み28,500回）まで料金がかからずに利用できます。

4. APIキーの取得方法

APIキーの取得が必要で、一定の利用まで無料ですが、それを超えるとリクエスト数などに応じた従量課金が発生します。 APIキーを取得するには、クレジットカードの登録が必要になります。

登録操作のイメージ

以下は、登録操作のイメージになります。

Google Maps APIの公式サイトのトップからキー取得までの流れ1

GmailなどGoogleアカウントを持っている場合はそのアカウントでログイン出来ます。

Google Maps APIの公式サイトのトップからキー取得までの流れ2

利用するカテゴリを選択します。

Google Maps APIの公式サイトのトップからキー取得までの流れ3

選択してNEXT。

Google Maps APIの公式サイトのトップからキー取得までの流れ4

請求アカウントの作成をクリック。

Google Maps APIの公式サイトのトップからキー取得までの流れ5

チェックして続行をクリック。

Google Maps APIの公式サイトのトップからキー取得までの流れ6

住所やクレジットカード情報を入力。

Google Maps APIの公式サイトのトップからキー取得までの流れ7

OKをクリック。

Google Maps APIの公式サイトのトップからキー取得までの流れ8

次へをクリック。

Google Maps APIの公式サイトのトップからキー取得までの流れ9

これで登録完了です。赤字部分にAPIキーの文字列が表示されます。

Google Maps APIの公式サイトのトップからキー取得までの流れ10

5. APIを利用したホームページへの埋め込み方法

基本は、APIを取り込み、JavaScriptでエリアを取得して、設定用の連想配列を作成し、マップオブジェクトをHTMLのタグに紐づける形で組込みます。

東京駅周辺のGoogle Mapsを埋め込む例

以下はGoogle Maps APIで「東京駅」周辺のマップを表示する例です。 ＜APIキー＞はご自身のAPIキーの文字列に置き換えてください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps Test</title>
</head>
<body>
<div id="map" style="height:300px;width:300px"></div>
<script src="http://maps.google.com/maps/api/js?key=＜APIキー＞&language=ja"></script>
<script>
var settings = {
    center:new google.maps.LatLng(35.681358,139.767125),
    zoom:16,
    mapTypeId:'roadmap'
};
new google.maps.Map(document.getElementById('map'), settings);
</script>
</body>
</html>
東京駅周辺のGoogle Mapsを埋め込む例のイメージ

コードの書き方

コード量が多いので書きながら解説していきます。

ステップ1：HTMLコードを記述

まずはHTMLコードを記述します。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps Test</title>
</head>
<body>
</body>
</html>

ステップ2：マップを表示するタグを追加

マップを表示するタグを追加します。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps Test</title>
</head>
<body>
<div id="map" style="height:300px;width:300px"></div>
</body>
</html>

ステップ3：APIキーを指定したAPI取り込み用のscriptタグを追加

APIキーを指定したAPI取り込み用のscriptタグを追加します。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps Test</title>
</head>
<body>
<div id="map" style="height:300px;width:300px"></div>
<script src="http://maps.google.com/maps/api/js?key=＜APIキー＞&language=ja"></script>
</body>
</html>

ステップ4：マップロード用のscriptタグを追加

マップロード用のscriptタグを追加します。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps Test</title>
</head>
<body>
<div id="map" style="height:300px;width:300px"></div>
<script src="http://maps.google.com/maps/api/js?key=＜APIキー＞&language=ja"></script>
<script>
</script>
</body>
</html>

ステップ5：マップの初期設定用のコードを追加

マップの初期設定用のコードを追加します。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps Test</title>
</head>
<body>
<div id="map" style="height:300px;width:300px"></div>
<script src="http://maps.google.com/maps/api/js?key=＜APIキー＞&language=ja"></script>
<script>
var settings = {
    center:new google.maps.LatLng(35.681358,139.767125),
    zoom:16,
    mapTypeId:'roadmap'
};
</script>
</body>
</html>
設定オプションについて

設定オプションについて説明します。

ステップ6：タグにマップを表示するコードを追加

マップを表すJavaScriptクラスはMapクラスです。 以下の赤字のようにしてdivタグにマップを表示するコードを追加します。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps Test</title>
</head>
<body>
<div id="map" style="height:300px;width:300px"></div>
<script src="http://maps.google.com/maps/api/js?key=＜APIキー＞&language=ja"></script>
<script>
var settings = {
    center:new google.maps.LatLng(35.681358,139.767125),
    zoom:16,
    mapTypeId:'roadmap'
};
new google.maps.Map(document.getElementById('map'), settings);
</script>
</body>
</html>

これでサンプルのコードは完成です。

6. APIでマーカーを表示する方法

以下ではマーカーをGoogle Maps APIで設定する方法を解説していきます。

Google Maps APIでデフォルトのマーカーを表示

以下はGoogle Maps APIでデフォルトのマーカーを表示する例です。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps Test</title>
</head>
<body>
<div id="map" style="height:300px;width:300px"></div>
<script src="http://maps.google.com/maps/api/js?key=＜APIキー＞&language=ja"></script>
<script>
var settings = {
    center:new google.maps.LatLng(35.681358,139.767125),
    zoom:16,
    mapTypeId:'roadmap'
};
var map = new google.maps.Map(document.getElementById('map'), settings);
var marker = new google.maps.Marker({
        position: new google.maps.LatLng(35.681358,139.767125),
        map: map,
    });
</script>
</body>
</html>
Google Maps APIでデフォルトのマーカーを表示

マーカーオブジェクトについて

マーカーを設定するにはMarkerオブジェクトを作成します。positionオプションに緯度経度を設定したLatLngオブジェクトで位置を設定し、mapオプションにマーカーを表示するマップのMapオブジェクトを設定します。

Google Maps APIでオリジナルのマーカーを表示

iconオプションを指定すれば、オリジナルのマーカーが表示できます。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps Test</title>
</head>
<body>
<div id="map" style="height:300px;width:300px"></div>
<script src="http://maps.google.com/maps/api/js?key=＜APIキー＞&language=ja"></script>
<script>
var settings = {
    center:new google.maps.LatLng(35.681358,139.767125),
    zoom:16,
    mapTypeId:'roadmap'
};
var map = new google.maps.Map(document.getElementById('map'), settings);
var marker = new google.maps.Marker({
        position: new google.maps.LatLng(35.681358,139.767125),
        map: map,
        icon:'icon_yellow_star.gif'
    });
</script>
</body>
</html>
Google Maps APIでオリジナルのマーカーを表示

7. APIで吹き出し（情報ウィンドウ）を表示する方法

InfoWindowオブジェクトを使用することで吹き出し（情報ウィンドウ）を表示することができます。

デフォルトの位置で吹き出し（情報ウィンドウ）を表示

以下はデフォルトの位置で吹き出し（情報ウィンドウ）を表示する例です。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps Test</title>
</head>
<body>
<div id="map" style="height:300px;width:300px"></div>
<script src="http://maps.google.com/maps/api/js?key=＜APIキー＞&language=ja"></script>
<script>
var position = new google.maps.LatLng(35.681358,139.767125);
var settings = {
    zoom: 15,
    center: position,
    mapTypeId: 'roadmap'
};
var map = new google.maps.Map(document.getElementById('map'), settings);
var marker = new google.maps.Marker({
        position: position,
	    map: map,
	    icon:'icon_yellow_star.gif'
    });
var infowindow = new google.maps.InfoWindow({
        content: "東京駅"
    });
infowindow.open(map,marker);
</script>
</body>
</html>
Google Maps APIでデフォルトの位置で吹き出し（情報ウィンドウ）を表示

位置を調整して吹き出し（情報ウィンドウ）を表示

以下はpixelOffsetオプションを設定することで位置を調整して吹き出し（情報ウィンドウ）を表示することができます。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps Test</title>
</head>
<body>
<div id="map" style="height:300px;width:300px"></div>
<script src="http://maps.google.com/maps/api/js?key=＜APIキー＞&language=ja"></script>
<script>
var position = new google.maps.LatLng(35.681358,139.767125);
var settings = {
    zoom: 15,
    center: position,
    mapTypeId: 'roadmap'
};
var map = new google.maps.Map(document.getElementById('map'), settings);
var marker = new google.maps.Marker({
        position: position,
	    map: map,
	    icon:'icon_yellow_star.gif'
    });
var infowindow = new google.maps.InfoWindow({
        pixelOffset: new google.maps.Size(0,16),
        content: "東京駅"
    });
infowindow.open(map,marker);
</script>
</body>
</html>
Google Maps APIで位置を調整して吹き出し（情報ウィンドウ）を表示

8. APIでブラウザのレンダリングを妨げない実装方法

はじめは、コードが難しくなるので触れておりませんでしたが、Google Maps API のマニュアルではブラウザのレンダリングを妨げない実装方法が推奨されていますので、それに合わせていきます。

async指定とcallbackを追加して表示

処理を関数化して、scriptタグの位置を変更し、scriptタグにasync指定とcallbackを追加して表示します。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps Test</title>
</head>
<body>
<div id="map" style="height:300px;width:300px"></div>
<script>
function initMap() {
    var position = new google.maps.LatLng(35.681358,139.767125);
    var settings = {
        zoom: 15,
        center: position,
        mapTypeId: 'roadmap'
    };
    var map = new google.maps.Map(document.getElementById('map'), settings);
    var marker = new google.maps.Marker({
            position: position,
            map: map,
            icon:'icon_yellow_star.gif'
        });
    var infowindow = new google.maps.InfoWindow({
            pixelOffset: new google.maps.Size(0,16),
            content: "東京駅"
        });
    infowindow.open(map,marker);
}
</script>
<script async defer
src="http://maps.google.com/maps/api/js?key=＜APIキー＞&language=ja&callback=initMap">
</script>
</body>
</html>
async指定とcallbackを追加して表示

APIの読み込みを非同期に最後にすることで、APIの実行が他の表示に影響を与えないで表示されます。

9. APIで2地点間のルートを表示する方法

今度はGoogle Maps APIで2地点間のルートを表示してみます。

2地点をマーカー表示

まずは2地点をマーカー表示してみます。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps Test</title>
</head>
<body>
<div id="map" style="height:400px;width:400px"></div>
<script>
var map;
var center = {lat:35.686121,lng:139.730373};
var tokyoStation = {lat:35.681358,lng:139.767125};
var shinjukuStation = {lat:35.689659,lng:139.700571};

function initMap () {
    var settings = {
        zoom: 12,
        center: center,
    };
    map = new google.maps.Map(document.getElementById('map'), settings);

    var markerTokyoSt = new google.maps.Marker({
            position: tokyoStation,
            map: map,
            icon:'icon_yellow_star.gif'
        });
    var infoTokySt = new google.maps.InfoWindow({
            pixelOffset: new google.maps.Size(0,16),
            content: "東京駅"
        });
    infoTokySt.open(map,markerTokyoSt);

    var markerShinjukuSt = new google.maps.Marker({
            position: shinjukuStation,
            map: map,
            icon:'icon_blue_star.gif'
        });
    var infoShinjukuSt = new google.maps.InfoWindow({
            pixelOffset: new google.maps.Size(0,16),
            content: "新宿駅"
        });
    infoShinjukuSt.open(map,markerShinjukuSt);
}
</script>
<script async defer
src="http://maps.google.com/maps/api/js?key=＜APIキー＞&language=ja&callback=initMap">
</script>
</body>
</html>
2地点をマーカー表示

少々マップを大きくして、新宿駅のマーカーを追加しました。 LatLngオブジェクトは連想配列の形式で代替できますのでその形式にしてみました。

ルート表示機能を追加

次にルート表示機能を追加してみます。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps Test</title>
</head>
<body>
<div id="map" style="height:400px;width:400px"></div>
<button onclick="drowRute()">ルート表示</button>
<button onclick="initMap()">初期化</button>
<script>
var map;
var center = {lat:35.686121,lng:139.730373};
var tokyoStation = {lat:35.681358,lng:139.767125};
var shinjukuStation = {lat:35.689659,lng:139.700571};

function initMap () {
    var settings = {
        zoom: 12,
        center: center,
    };
    map = new google.maps.Map(document.getElementById('map'), settings);

    var markerTokyoSt = new google.maps.Marker({
            position: tokyoStation,
            map: map,
            icon:'icon_yellow_star.gif'
        });
    var infoTokySt = new google.maps.InfoWindow({
            pixelOffset: new google.maps.Size(0,16),
            content: "東京駅"
        });
    infoTokySt.open(map,markerTokyoSt);

    var markerShinjukuSt = new google.maps.Marker({
            position: shinjukuStation,
            map: map,
            icon:'icon_blue_star.gif'
        });
    var infoShinjukuSt = new google.maps.InfoWindow({
            pixelOffset: new google.maps.Size(0,16),
            content: "新宿駅"
        });
    infoShinjukuSt.open(map,markerShinjukuSt);
}

function drowRute() {
    var directionsDisplay;
    directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
    var request = {
        origin: tokyoStation,
        destination: shinjukuStation,
        travelMode: 'DRIVING'
    }
    var directionsService = new google.maps.DirectionsService();
    directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);
        }
    });
}
</script>
<script async defer
src="http://maps.google.com/maps/api/js?key=＜APIキー＞&language=ja&callback=initMap">
</script>
</body>
</html>

ルート表示と初期化の2つのボタンを追加して、ルート表示用の関数を追加しました。

ロード時のイメージ

ロード時のイメージです。

ルート表示機能（ロード時）

ルート表示ボタン押下後のイメージ

ルート表示ボタン押下後のイメージです。

ルート表示機能（ルート表示ボタン押下後）

初期化ボタン押下後のイメージ

初期化ボタン押下後のイメージです。

ルート表示機能（初期化ボタン押下後）

更新履歴

更新履歴になります。

戻る

スポンサーリンク

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Burp /Eclipse /Fiddler /gcc /gdb /Git /g++ /JDK /JMeter /JUnit /Teraterm /ZAP

技術・仕様
Ajax /CORBA /Jakarta EE（旧称J2EE、Java EE） /JNI

ライブラリ／Framework／CMS
bootstrap /jQuery /FuelPHP /Lucene /MyBatis /Seasar2 /Spring /Struts /WordPress

Web API
Google Maps

ITインフラOSとミドルウェア
Linux /Windows /シェル
ActiveMQ /Tomcat /MariaDB /MySQL /Nagios /Redis /Solr

ITインフラサーバー
公開Webサーバー

ITインフラネットワーク
プログラミング /構築

ITインフラセキュリティ
公開サーバーのセキュリティ

PC製品
ZOTAC

SI
ホームページの作り方

その他
IT用語 /ITスキル体系

スポンサーリンク

関連サイト内検索ツール

zealseedsおよび関連サイト内のページが検索できます。

IPアドレス確認ツール

あなたのグローバルIPアドレスは以下です。

18.189.22.136

HTMLの表示色確認ツール

パスワード生成ツール

文字数のプルダウンを選択して、取得ボタンを押すと「a～z、A～Z、0～9」の文字を ランダムに組み合わせた文字列が表示されます。

ここに生成されます。

スポンサーリンク

トップ / プライバシーポリシー

Copyright (C) 2007-2024 zealseeds. All Rights Reserved. Loarding…