MIERUNE地図 - Google Maps API to Leaflet
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
img
README.md

README.md

MIERUNE地図 - Google Maps API to Leaflet


Getting Started

背景地図表示

背景地図表示

example path

mierune-leaflet


index.html


Google Maps API

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>GoogleMapsAPI example</title>

    <!--GoogleMapsAPI 読み込み-->
    <script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxx&callback=initMap" async defer></script>

    <link href="./css/stylesheet.css" rel="stylesheet" />

</head>
<body>

    <div id="map"></div>

    <script src="./js/script.js"></script>

</body>
</html>

Leaflet

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Leaflet example</title>

        <!--Leaflet 読み込み-->
        <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
        <link href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" rel="stylesheet"/>

        <link href="./css/stylesheet.css" rel="stylesheet"/>

    </head>
    <body>

        <div id="map"></div>

        <script src="./js/script.js"></script>

    </body>
</html>

stylesheet.css


Google Maps API

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

#map {
    z-index: 0;
    height: 100%;
}

Leaflet

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

#map {
    z-index: 0;
    height: 100%;
}

script.js


Google Maps API

function initMap() {

    // 地図画面表示
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 35.681, lng: 139.767},
        zoom: 11,
        mapTypeId: 'roadmap',
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
    });

}

Leaflet

// 「Standard, Premium, Global Scale」プラン 認証キー
var apikey = "xxxxxxxxxx";

// スタイル: normal, gray, bright, blue, warm, MIERUNE
var style = "normal";

// URL設定
var url = "https://tile.cdn.mierune.co.jp/styles/" + style + "/{z}/{x}/{y}.png" + "?key=" + apikey;

// MIERUNE地図 読み込み
var m_map = new L.tileLayer(url, {
    attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
});

// 地図画面表示
var map = L.map('map', {
    center: [35.681, 139.767],
    zoom: 11,
    zoomControl: true,
    layers: [m_map]
});



マーカー・ポップアップ表示

マーカー・ポップアップ表示

example path

mierune-leaflet


script.js


Google Maps API

// マーカー設定
var Map_Point = new google.maps.Marker({
    position: {lat: 35.681, lng: 139.767},
    map: map
});

// ポップアップ設定
var popup = new google.maps.InfoWindow({
    content: "東京駅だよ!!"
});
Map_Point.addListener('click', function(){
    popup.open(map, Map_Point);
});

Leaflet

// マーカー設定
var Map_Point = L.marker(
    [35.681, 139.767]
).addTo(map);

// ポップアップ設定
var comment = '東京駅だよ!!';
Map_Point.bindPopup(comment).openPopup();



Other information