【HTML / javascript】Googleマップ表示プラグイン

このプラグインについて

座標を指定することで、webページ上にGoogleマップを表示するjavascriptのプラグインです。
以前公開した方法よりも小回りがきくように改良しています。
複数のピンの配置と彩度や明度の調整ができる機能を追加しています。

ダウンロード／下準備

1. 下記zipファイルをダウンロードし、解凍してください。
20171203_gmap_settings.js.zip

2. Googleマップ用のAPIキーを取得してください。
APIキーの取得は、Google Maps APIより行ってください。
※無償版で大丈夫です。

3. htmlファイルを準備してください。
下記例を参考に、地図を表示したいページのファイルにコードを追加してください。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Googleマップ表示テスト</title>
    <style>
    #map_id {
        width: 800px;
        height: 400px;
        margin: 0 auto;
    }
    </style>
</head>

<body>

<!-- [必須項目] Googleマップ表示位置(任意のid名をつける) -->
<div id="map_id"></div>


<!-- *****************************************************
    以下、必要なスクリプトの読み込みと関数の実行
****************************************************** -->

<!-- [必須項目] ?key=以降にGoogle Maps APIのキーを指定 -->
<script src="http://maps.google.com/maps/api/js?key=ここに取得したGoogle Maps APIのキーを入力"></script>

<!-- [必須項目] Googleマップ表示用のスクリプト読み込み -->
<script type="text/javascript" src="./gmap_settings.js"></script>

<script>
/* (1)ここに地図を表示するためのコードを書く */
</script>

</body>
</html>

使い方

htmlファイルの「/* (1)ここに地図を表示するためのコードを書く */」の部分にコードを追加してください。

まずはシンプルに表示


map_create(
    "マップ表示テスト1",    // [必須項目] マップ左上に表示されるマップの名称
    'map_id',               // [必須項目] Googleマップを表示するタグのid名
    35.658584,              // [必須項目] 表示の中心となる緯度
    139.745418,             // [必須項目] 表示の中心となる経度
    10,                     // [必須項目] ズーム倍率(1～21の整数)
);

アイコンを変更

アイコンの画像を下記のものに変更してみます。
※アイコンを相対パスで指定しても動かない場合は、絶対パスで指定してください。


// アイコン(ピン)を表示する座標情報とオプション(変数名は変更可能)
// 変数の中身は変えないでください
var map_settings = [
    'maps',     // アイコンを表示する座標用
    'options'   // 表示方法を変更するオプション用
];

// アイコンを表示する座標の設定
// アイコンを相対パスで指定しても表示されない場合は、絶対パスで指定してください
map_settings['maps'] = [
    {
        name: "東京タワー",  // アイコンの場所名(任意名称)
        lat: 35.658584,      // アイコンの場所の緯度
        lng: 139.745418,     // アイコンの場所の経度
        icon: "./icon/map_pin_01.png", // アイコン画像のパス(絶対パス or このファイルからの相対パス)
        icon_w: 36,          // アイコンの横サイズ(ピクセル)
        icon_h: 50,          // アイコンの縦サイズ(ピクセル)
    },
];

map_create(
    "マップ表示テスト2",
    'map_id',
    35.658584,
    139.745418,
    10,
    map_settings,    // ここに変数を指定
);

アイコンを複数個置く

map_settings['maps']に情報を追加することで、複数の箇所にアイコンを設置できます。
アイコン画像の情報を省略した場合、デフォルトのアイコンが表示されます。


map_settings['maps'] = [
    {
        // 1つ目の座標の情報
        name: "東京タワー",
        lat: 35.658584,
        lng: 139.745418,
        icon: "./icon/map_pin_01.png",
        icon_w: 36,
        icon_h: 50,
    },

    // 以降、必要に応じて増やす
    {
        // 2つ目の座標の情報
        name: "東京スカイツリー",
        lat: 35.710076,
        lng: 139.810683,
    },
];

地図の色味を変える

map_create関数を呼び出す前に、map_settings['options']に情報を追加することで、地図の彩度や明暗を変えることができます。

指定する項目は、省略することでデフォルト値になります。


// 表示方法を変更するオプションの設定
map_settings['options'] = {
    // 必要な項目のみ記述することが可能(省略した項目はデフォルト値となる)
    'lightness':-20,                // [省略可能] 明暗の変更(暗:-100～100:明)
    'saturation':-100,              // [省略可能] 彩度の変更(-100～100)
    'gamma':1.0,                    // [省略可能] ガンマ値の変更(0.01～10.0)
    'weight':1                      // [省略可能] 地図上の線の太さ(0以上の整数値:1が最細, 0が標準, 2以降から標準より太くなる)
}

Googleマップ表示用の関数【javascript】

webページにGoogleマップを埋め込む際の、javascript用関数を公開しています。

2017.11.19