Google Mapsが新プランになったから、Leafletを試してみた

のえる

2019.01.07

新年あけましておめでとうございます。

昨年、2018年はGoogle Mapsの料金体系が大きく変更された年でした。
そのため、各Webページを見ていると、「Googleマップが正しく読み込まれませんでした」というエラーが出ているサイトをよく見かけます。

この原因は複数ありますが、大きく分けると下記の3点となります。

APIキーを利用していない場合
APIキーを利用しているが、無償枠を超えた場合
請求先アカウントの登録がされていない

特に3つ目が曲者でして、「無料超過分のAPI使用数を超えると従量課金される」という点が非常に厄介です。
(詳しい料金・API使用回数等はコチラをご覧ください)

Google Mapsとほぼ等価の機能が使えて、でもお金はかけたくない！！

そんなワガママな願いを叶える素敵なライブラリがあるので紹介します。

1 Leaflet とは
2 Leafletをインストールする
3 Leafletを表示する
4 さいごに

Leaflet とは

Leafletとは、オープンソースのJavascript地図ライブラリです。
このライブラリの特徴は「モバイル向け対応済み」「シンプルで軽量」「機能をプラグインで追加できる」という点です。

特に「機能をプラグインで追加」という点が優秀で、かなり多くのプラグインが存在しています。
ただ逆に、プラグインを入れないと、必要最低限の機能しかないという点も注意です。

Leafletをインストールする

まずはLeaflet1をインストール（ダウンロード）しましょう。

ダウンロードはコチラです。
※記事執筆時点での最新バージョンは v1.4.0 です

ダウンロードが完了したら、「leaflet.js」「leaflet.css」「images」をHTMLファイルで読み込みます。
(imagesは leaflet.css と同一階層に配置します)

必要ファイルはこれで終了です。

Leafletを表示する

それではLeafletでいろいろ表示してみましょう。

地図を表示

下記のようにすることで地図を表示できます。


<!DOCTYPE html>
<html>
    <head>
        <!-- leaflet -->
        <link rel="stylesheet" href="css/leaflet.css" />
        <script src="js/leaflet.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            html, body {
                height: 100%;
            }
            #myMap {
                height: 100%;
                width: 100%;
            }
        </style>
        <script>
            window.onload = function() {
                var lat = 35.184522;
                var lng = 136.900699;
                var zoom = 16;
                var maxZoom = 18;
                // マップオブジェクトを作成
                var map = L.map('myMap', {
                }).setView([lat, lng], zoom);
                //OSMレイヤー追加
                L.tileLayer(
                    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    {
                        attribution: 'Map data © <a href="http://openstreetmap.org" target="_blank" rel="noopener noreferrer">OpenStreetMap</a>',
                        maxZoom: maxZoom
                    }
                ).addTo(map);
            }
        </script>
    </head>
    <body>
        <div id="myMap"></div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

margin: 0;

padding: 0;

}

html, body {

height: 100%;

}

#myMap {

height: 100%;

width: 100%;

}

</style>

window.onload = function() {

var lat = 35.184522;

var lng = 136.900699;

var zoom = 16;

var maxZoom = 18;

// マップオブジェクトを作成

var map = L.map('myMap', {

}).setView([lat, lng], zoom);

//OSMレイヤー追加

L.tileLayer(

'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',

{

attribution: 'Map data © <a href="http://openstreetmap.org" target="_blank" rel="noopener noreferrer">OpenStreetMap</a>',

maxZoom: maxZoom

}

).addTo(map);

}

</script>

</head>

<body>

</body>

</html>

ズームコントロールを変更

デフォルトのズームコントロールは左上に固定され、さらにマウスオーバー時のテキストは英語です。
不都合な場合もあるかとおもいますので、変更してみます。


<!DOCTYPE html>
<html>
    <head>
        <!-- leaflet -->
        <link rel="stylesheet" href="css/leaflet.css" />
        <script src="js/leaflet.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            html, body {
                height: 100%;
            }
            #myMap {
                height: 100%;
                width: 100%;
            }
        </style>
        <script>
            window.onload = function() {
                var lat = 35.184522;
                var lng = 136.900699;
                var zoom = 16;
                var maxZoom = 18;
                // マップオブジェクトを作成
                var map = L.map('myMap', {
                    zoomControl: false  // デフォルトのズームコントロールを消す
                }).setView([lat, lng], zoom);
                //OSMレイヤー追加
                L.tileLayer(
                    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    {
                        attribution: 'Map data © <a href="http://openstreetmap.org" target="_blank" rel="noopener noreferrer">OpenStreetMap</a>',
                        maxZoom: maxZoom
                    }
                ).addTo(map);
                // ズームコントロールをカスタマイズして設定
                L.control.zoom({
                    zoomInTitle: '拡大',
                    zoomOutTitle: '縮小',
                    position: 'bottomright'
                }).addTo(map);
            }
        </script>
    </head>
    <body>
        <div id="myMap"></div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

margin: 0;

padding: 0;

}

html, body {

height: 100%;

}

#myMap {

height: 100%;

width: 100%;

}

</style>

window.onload = function() {

var lat = 35.184522;

var lng = 136.900699;

var zoom = 16;

var maxZoom = 18;

// マップオブジェクトを作成

var map = L.map('myMap', {

zoomControl: false // デフォルトのズームコントロールを消す

}).setView([lat, lng], zoom);

//OSMレイヤー追加

L.tileLayer(

'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',

{

attribution: 'Map data © <a href="http://openstreetmap.org" target="_blank" rel="noopener noreferrer">OpenStreetMap</a>',

maxZoom: maxZoom

}

).addTo(map);

// ズームコントロールをカスタマイズして設定

L.control.zoom({

zoomInTitle: '拡大',

zoomOutTitle: '縮小',

position: 'bottomright'

}).addTo(map);

}

</script>

</head>

<body>

</body>

</html>

マーカーを表示

地図の基本となるマーカーを表示します。
また、マーカークリックでのポップアップ表示や、初めからポップアップを出しておく方法もこちらに記載します。


<!DOCTYPE html>
<html>
    <head>
        <!-- leaflet -->
        <link rel="stylesheet" href="css/leaflet.css" />
        <script src="js/leaflet.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            html, body {
                height: 100%;
            }
            #myMap {
                height: 100%;
                width: 100%;
            }
        </style>
        <script>
            window.onload = function() {
                var lat = 35.184522;
                var lng = 136.900699;
                var zoom = 16;
                var maxZoom = 18;
                // マップオブジェクトを作成
                var map = L.map('myMap', {
                    zoomControl: false  // デフォルトのズームコントロールを消す
                }).setView([lat, lng], zoom);
                //OSMレイヤー追加
                L.tileLayer(
                    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    {
                        attribution: 'Map data © <a href="http://openstreetmap.org" target="_blank" rel="noopener noreferrer">OpenStreetMap</a>',
                        maxZoom: maxZoom
                    }
                ).addTo(map);
                // ズームコントロールをカスタマイズして設定
                L.control.zoom({
                    zoomInTitle: '拡大',
                    zoomOutTitle: '縮小',
                    position: 'bottomright'
                }).addTo(map);
                // マーカー追加
                var marker = L.marker([lat, lng]).addTo(map);
                // マーカークリックでポップアップテキストを表示する場合
                // marker.bindPopup("<b>Hello world!</b><br />I am a popup.");
                // 初めからマーカーにポップアップを表示する場合
                // marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
            }
        </script>
    </head>
    <body>
        <div id="myMap"></div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

margin: 0;

padding: 0;

}

html, body {

height: 100%;

}

#myMap {

height: 100%;

width: 100%;

}

</style>

window.onload = function() {

var lat = 35.184522;

var lng = 136.900699;

var zoom = 16;

var maxZoom = 18;

// マップオブジェクトを作成

var map = L.map('myMap', {

zoomControl: false // デフォルトのズームコントロールを消す

}).setView([lat, lng], zoom);

//OSMレイヤー追加

L.tileLayer(

'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',

{

attribution: 'Map data © <a href="http://openstreetmap.org" target="_blank" rel="noopener noreferrer">OpenStreetMap</a>',

maxZoom: maxZoom

}

).addTo(map);

// ズームコントロールをカスタマイズして設定

L.control.zoom({

zoomInTitle: '拡大',

zoomOutTitle: '縮小',

position: 'bottomright'

}).addTo(map);

// マーカー追加

var marker = L.marker([lat, lng]).addTo(map);

// マーカークリックでポップアップテキストを表示する場合

// marker.bindPopup("<b>Hello world!</b><br />I am a popup.");

// 初めからマーカーにポップアップを表示する場合

// marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

}

</script>

</head>

<body>

</body>

</html>

ポップアップを表示

地図にポップアップのテキストのみを表示したい場合にはこちらを使用します。


<!DOCTYPE html>
<html>
    <head>
        <!-- leaflet -->
        <link rel="stylesheet" href="css/leaflet.css" />
        <script src="js/leaflet.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            html, body {
                height: 100%;
            }
            #myMap {
                height: 100%;
                width: 100%;
            }
        </style>
        <script>
            window.onload = function() {
                var lat = 35.184522;
                var lng = 136.900699;
                var zoom = 16;
                var maxZoom = 18;
                // マップオブジェクトを作成
                var map = L.map('myMap', {
                    zoomControl: false  // デフォルトのズームコントロールを消す
                }).setView([lat, lng], zoom);
                //OSMレイヤー追加
                L.tileLayer(
                    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    {
                        attribution: 'Map data © <a href="http://openstreetmap.org" target="_blank" rel="noopener noreferrer">OpenStreetMap</a>',
                        maxZoom: maxZoom
                    }
                ).addTo(map);
                // ズームコントロールをカスタマイズして設定
                L.control.zoom({
                    zoomInTitle: '拡大',
                    zoomOutTitle: '縮小',
                    position: 'bottomright'
                }).addTo(map);
                // マーカー追加
                var marker = L.marker([lat, lng]).addTo(map);
                // マーカークリックでポップアップテキストを表示する場合
                // marker.bindPopup("<b>Hello world!</b><br />I am a popup.");
                // 初めからマーカーにポップアップを表示する場合
                // marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
                // ポップアップを表示
                var popup = L.popup()
                            .setLatLng([lat+0.001, lng+0.001])
                            .setContent("I am a standalone popup.")
                            .openOn(map);
            }
        </script>
    </head>
    <body>
        <div id="myMap"></div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

margin: 0;

padding: 0;

}

html, body {

height: 100%;

}

#myMap {

height: 100%;

width: 100%;

}

</style>

window.onload = function() {

var lat = 35.184522;

var lng = 136.900699;

var zoom = 16;

var maxZoom = 18;

// マップオブジェクトを作成

var map = L.map('myMap', {

zoomControl: false // デフォルトのズームコントロールを消す

}).setView([lat, lng], zoom);

//OSMレイヤー追加

L.tileLayer(

'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',

{

attribution: 'Map data © <a href="http://openstreetmap.org" target="_blank" rel="noopener noreferrer">OpenStreetMap</a>',

maxZoom: maxZoom

}

).addTo(map);

// ズームコントロールをカスタマイズして設定

L.control.zoom({

zoomInTitle: '拡大',

zoomOutTitle: '縮小',

position: 'bottomright'

}).addTo(map);

// マーカー追加

var marker = L.marker([lat, lng]).addTo(map);

// マーカークリックでポップアップテキストを表示する場合

// marker.bindPopup("<b>Hello world!</b><br />I am a popup.");

// 初めからマーカーにポップアップを表示する場合

// marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

// ポップアップを表示

var popup = L.popup()

.setLatLng([lat+0.001, lng+0.001])

.setContent("I am a standalone popup.")

.openOn(map);

}

</script>

</head>

<body>

</body>

</html>

マップをクリックした位置を取得 / 移動する

マップをクリックした位置の緯度・軽度を取得したり、その場所へ中心を移動する方法は下記のとおりです。


<!DOCTYPE html>
<html>
    <head>
        <!-- leaflet -->
        <link rel="stylesheet" href="css/leaflet.css" />
        <script src="js/leaflet.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            html, body {
                height: 100%;
            }
            #myMap {
                height: 100%;
                width: 100%;
            }
        </style>
        <script>
            window.onload = function() {
                var lat = 35.184522;
                var lng = 136.900699;
                var zoom = 16;
                var maxZoom = 18;
                // マップオブジェクトを作成
                var map = L.map('myMap', {
                    zoomControl: false  // デフォルトのズームコントロールを消す
                }).setView([lat, lng], zoom);
                //OSMレイヤー追加
                L.tileLayer(
                    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    {
                        attribution: 'Map data © <a href="http://openstreetmap.org" target="_blank" rel="noopener noreferrer">OpenStreetMap</a>',
                        maxZoom: maxZoom
                    }
                ).addTo(map);
                // ズームコントロールをカスタマイズして設定
                L.control.zoom({
                    zoomInTitle: '拡大',
                    zoomOutTitle: '縮小',
                    position: 'bottomright'
                }).addTo(map);
                // マーカー追加
                var marker = L.marker([lat, lng]).addTo(map);
                // マーカークリックでポップアップテキストを表示する場合
                // marker.bindPopup("<b>Hello world!</b><br />I am a popup.");
                // 初めからマーカーにポップアップを表示する場合
                // marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
                // ポップアップを表示
                var popup = L.popup()
                            .setLatLng([lat+0.001, lng+0.001])
                            .setContent("I am a standalone popup.")
                            .openOn(map);
                // マップクリックイベントを追加
                map.on('click', function(e) {
                    alert("You clicked the map at " + e.latlng);
                    // クリックした位置へ地図の中心を移動
                    map.panTo(e.latlng, {
                        animate: true
                    });
                });
            }
        </script>
    </head>
    <body>
        <div id="myMap"></div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

margin: 0;

padding: 0;

}

html, body {

height: 100%;

}

#myMap {

height: 100%;

width: 100%;

}

</style>

window.onload = function() {

var lat = 35.184522;

var lng = 136.900699;

var zoom = 16;

var maxZoom = 18;

// マップオブジェクトを作成

var map = L.map('myMap', {

zoomControl: false // デフォルトのズームコントロールを消す

}).setView([lat, lng], zoom);

//OSMレイヤー追加

L.tileLayer(

'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',

{

attribution: 'Map data © <a href="http://openstreetmap.org" target="_blank" rel="noopener noreferrer">OpenStreetMap</a>',

maxZoom: maxZoom

}

).addTo(map);

// ズームコントロールをカスタマイズして設定

L.control.zoom({

zoomInTitle: '拡大',

zoomOutTitle: '縮小',

position: 'bottomright'

}).addTo(map);

// マーカー追加

var marker = L.marker([lat, lng]).addTo(map);

// マーカークリックでポップアップテキストを表示する場合

// marker.bindPopup("<b>Hello world!</b><br />I am a popup.");

// 初めからマーカーにポップアップを表示する場合

// marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

// ポップアップを表示

var popup = L.popup()

.setLatLng([lat+0.001, lng+0.001])

.setContent("I am a standalone popup.")

.openOn(map);

// マップクリックイベントを追加

map.on('click', function(e) {

alert("You clicked the map at " + e.latlng);

// クリックした位置へ地図の中心を移動

map.panTo(e.latlng, {

animate: true

});

}

</script>

</head>

<body>

</body>

</html>

地図に円を描く

地図上で範囲を指定する場合などで使用する、円を描く方法は下記のとおりです。


<!DOCTYPE html>
<html>
    <head>
        <!-- leaflet -->
        <link rel="stylesheet" href="css/leaflet.css" />
        <script src="js/leaflet.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            html, body {
                height: 100%;
            }
            #myMap {
                height: 100%;
                width: 100%;
            }
        </style>
        <script>
            window.onload = function() {
                var lat = 35.184522;
                var lng = 136.900699;
                var zoom = 16;
                var maxZoom = 18;
                // マップオブジェクトを作成
                var map = L.map('myMap', {
                    zoomControl: false  // デフォルトのズームコントロールを消す
                }).setView([lat, lng], zoom);
                //OSMレイヤー追加
                L.tileLayer(
                    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    {
                        attribution: 'Map data © <a href="http://openstreetmap.org" target="_blank" rel="noopener noreferrer">OpenStreetMap</a>',
                        maxZoom: maxZoom
                    }
                ).addTo(map);
                // ズームコントロールをカスタマイズして設定
                L.control.zoom({
                    zoomInTitle: '拡大',
                    zoomOutTitle: '縮小',
                    position: 'bottomright'
                }).addTo(map);
                // マーカー追加
                var marker = L.marker([lat, lng]).addTo(map);
                // マーカークリックでポップアップテキストを表示する場合
                // marker.bindPopup("<b>Hello world!</b><br />I am a popup.");
                // 初めからマーカーにポップアップを表示する場合
                // marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
                // ポップアップを表示
                var popup = L.popup()
                            .setLatLng([lat+0.001, lng+0.001])
                            .setContent("I am a standalone popup.")
                            .openOn(map);
                // マップクリックイベントを追加
                map.on('click', function(e) {
                    alert("You clicked the map at " + e.latlng);
                    // クリックした位置へ地図の中心を移動
                    map.panTo(e.latlng, {
                        animate: true
                    });
                });
                // 円を描く
                var circle = L.circle([lat, lng], {
                    color: 'blue',
                    fillColor: '#0091f9',
                    fillOpacity: 0.1,
                    radius: 200
                }).addTo(map);
            }
        </script>
    </head>
    <body>
        <div id="myMap"></div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

margin: 0;

padding: 0;

}

html, body {

height: 100%;

}

#myMap {

height: 100%;

width: 100%;

}

</style>

window.onload = function() {

var lat = 35.184522;

var lng = 136.900699;

var zoom = 16;

var maxZoom = 18;

// マップオブジェクトを作成

var map = L.map('myMap', {

zoomControl: false // デフォルトのズームコントロールを消す

}).setView([lat, lng], zoom);

//OSMレイヤー追加

L.tileLayer(

'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',

{

attribution: 'Map data © <a href="http://openstreetmap.org" target="_blank" rel="noopener noreferrer">OpenStreetMap</a>',

maxZoom: maxZoom

}

).addTo(map);

// ズームコントロールをカスタマイズして設定

L.control.zoom({

zoomInTitle: '拡大',

zoomOutTitle: '縮小',

position: 'bottomright'

}).addTo(map);

// マーカー追加

var marker = L.marker([lat, lng]).addTo(map);

// マーカークリックでポップアップテキストを表示する場合

// marker.bindPopup("<b>Hello world!</b><br />I am a popup.");

// 初めからマーカーにポップアップを表示する場合

// marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

// ポップアップを表示

var popup = L.popup()

.setLatLng([lat+0.001, lng+0.001])

.setContent("I am a standalone popup.")

.openOn(map);

// マップクリックイベントを追加

map.on('click', function(e) {

alert("You clicked the map at " + e.latlng);

// クリックした位置へ地図の中心を移動

map.panTo(e.latlng, {

animate: true

});

// 円を描く

var circle = L.circle([lat, lng], {

color: 'blue',

fillColor: '#0091f9',

fillOpacity: 0.1,

radius: 200

}).addTo(map);

}

</script>

</head>

<body>

</body>

</html>

カスタムマーカーを表示する

独自のマーカーを表示する場合は下記のとおりです。
(今回使用したカスタムアイコンは 100×100 のpng画像です)


<!DOCTYPE html>
<html>
    <head>
        <!-- leaflet -->
        <link rel="stylesheet" href="css/leaflet.css" />
        <script src="js/leaflet.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            html, body {
                height: 100%;
            }
            #myMap {
                height: 100%;
                width: 100%;
            }
        </style>
        <script>
            window.onload = function() {
                var lat = 35.184522;
                var lng = 136.900699;
                var zoom = 16;
                var maxZoom = 18;
                // マップオブジェクトを作成
                var map = L.map('myMap', {
                    zoomControl: false  // デフォルトのズームコントロールを消す
                }).setView([lat, lng], zoom);
                //OSMレイヤー追加
                L.tileLayer(
                    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    {
                        attribution: 'Map data © <a href="http://openstreetmap.org" target="_blank" rel="noopener noreferrer">OpenStreetMap</a>',
                        maxZoom: maxZoom
                    }
                ).addTo(map);
                // ズームコントロールをカスタマイズして設定
                L.control.zoom({
                    zoomInTitle: '拡大',
                    zoomOutTitle: '縮小',
                    position: 'bottomright'
                }).addTo(map);
                // マーカー追加
                var marker = L.marker([lat, lng]).addTo(map);
                // マーカークリックでポップアップテキストを表示する場合
                // marker.bindPopup("<b>Hello world!</b><br />I am a popup.");
                // 初めからマーカーにポップアップを表示する場合
                // marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
                // ポップアップを表示
                var popup = L.popup()
                            .setLatLng([lat+0.001, lng+0.001])
                            .setContent("I am a standalone popup.")
                            .openOn(map);
                // マップクリックイベントを追加
                map.on('click', function(e) {
                    alert("You clicked the map at " + e.latlng);
                    // クリックした位置へ地図の中心を移動
                    map.panTo(e.latlng, {
                        animate: true
                    });
                });
                // 円を描く
                var circle = L.circle([lat, lng], {
                    color: 'blue',
                    fillColor: '#0091f9',
                    fillOpacity: 0.1,
                    radius: 200
                }).addTo(map);
                // カスタムマーカー設定
                var customIcon = L.icon({
                    iconUrl: 'img/custom_pin.png',
                    iconRetinaUrl: 'img/custom_pin.png',
                    iconSize: [50, 50],
                    iconAnchor: [25, 50],
                    popupAnchor: [0, -50],
                });
                var customMarker = L.marker([lat-0.001, lng-0.001], {
                                            icon: customIcon
                                        }).addTo(map);
            }
        </script>
    </head>
    <body>
        <div id="myMap"></div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

margin: 0;

padding: 0;

}

html, body {

height: 100%;

}

#myMap {

height: 100%;

width: 100%;

}

</style>

window.onload = function() {

var lat = 35.184522;

var lng = 136.900699;

var zoom = 16;

var maxZoom = 18;

// マップオブジェクトを作成

var map = L.map('myMap', {

zoomControl: false // デフォルトのズームコントロールを消す

}).setView([lat, lng], zoom);

//OSMレイヤー追加

L.tileLayer(

'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',

{

attribution: 'Map data © <a href="http://openstreetmap.org" target="_blank" rel="noopener noreferrer">OpenStreetMap</a>',

maxZoom: maxZoom

}

).addTo(map);

// ズームコントロールをカスタマイズして設定

L.control.zoom({

zoomInTitle: '拡大',

zoomOutTitle: '縮小',

position: 'bottomright'

}).addTo(map);

// マーカー追加

var marker = L.marker([lat, lng]).addTo(map);

// マーカークリックでポップアップテキストを表示する場合

// marker.bindPopup("<b>Hello world!</b><br />I am a popup.");

// 初めからマーカーにポップアップを表示する場合

// marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

// ポップアップを表示

var popup = L.popup()

.setLatLng([lat+0.001, lng+0.001])

.setContent("I am a standalone popup.")

.openOn(map);

// マップクリックイベントを追加

map.on('click', function(e) {

alert("You clicked the map at " + e.latlng);

// クリックした位置へ地図の中心を移動

map.panTo(e.latlng, {

animate: true

});

// 円を描く

var circle = L.circle([lat, lng], {

color: 'blue',

fillColor: '#0091f9',

fillOpacity: 0.1,

radius: 200

}).addTo(map);

// カスタムマーカー設定

var customIcon = L.icon({

iconUrl: 'img/custom_pin.png',

iconRetinaUrl: 'img/custom_pin.png',

iconSize: [50, 50],

iconAnchor: [25, 50],

popupAnchor: [0, -50],

});

var customMarker = L.marker([lat-0.001, lng-0.001], {

icon: customIcon

}).addTo(map);

}

</script>

</head>

<body>

</body>

</html>

さいごに

無事に地図は表示されましたか？
その他、プラグインについては需要があれば記載していこうかと思いますので、今回はここまで！

おすすめ記事

POPULAR

のえる

Full-stack Developer

記事一覧

【WordPress】使うだけでオシャレになる！レスポンシブ対応のおすすめテーマ8選【無料＆有料】

無料VRゲーム THE LAB をやってみた話

のえる

Full-stack Developer

お休みはゲーム三昧。目指すは生涯自由人。ツナ缶大好き。

記事一覧

Google Mapsが新プランになったから、Leafletを試してみた

Leaflet とは

Leafletをインストールする

Leafletを表示する

地図を表示

ズームコントロールを変更

マーカーを表示

ポップアップを表示

マップをクリックした位置を取得 / 移動する

地図に円を描く

カスタムマーカーを表示する

さいごに

PCのディスプレイを大型にするメリットとデメリット

非同期で呼び出したPHPで重い処理をしてもタイムアウトさせない方法

WebブラウザからWindowsアプリケーションを開く[追記あり]

node.js のアプリを永続化(デーモン化)させる

iPadアプリがフルスクリーンにならない

WindowsのDockerでMySQLが起動しない

Google Mapsが新プランになったから、Leafletを試してみた

Leaflet とは

Leafletをインストールする

Leafletを表示する

地図を表示

ズームコントロールを変更

マーカーを表示

ポップアップを表示

マップをクリックした位置を取得 / 移動する

地図に円を描く

カスタムマーカーを表示する

さいごに

簡単にドラッグ&ドロップができるjquery.pep.jsを実装する【デモ有り】

PCのディスプレイを大型にするメリットとデメリット

非同期で呼び出したPHPで重い処理をしてもタイムアウトさせない方法

WebブラウザからWindowsアプリケーションを開く[追記あり]

PHPで日付をフォーマットするならCarbonを使おう

PCのディスプレイを大型にするメリットとデメリット

非同期で呼び出したPHPで重い処理をしてもタイムアウトさせない方法

WebブラウザからWindowsアプリケーションを開く[追記あり]

node.js のアプリを永続化(デーモン化)させる

iPadアプリがフルスクリーンにならない

WindowsのDockerでMySQLが起動しない