Leaflet.jsでGoogle Maps を表示する

「Leafletでグーグルマップって使えないんですか？」という質問が多かったので書いておきます。

Google Maps Tileを表示する

LeafletでGoogle Mapsの地図を表示するにはLeaflet.GridLayer.GoogleMutantプラグインを使う必要があります。
また、leaflet以外にGoogle Maps APIも読み込む必要があります。

<!-- Google Maps API -->
<script src="https://maps.googleapis.com/maps/api/js?key=APIキーをここに記述" async defer></script>

<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
    integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
    crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
    integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
    crossorigin=""></script>
    
   
<!-- Leaflet Google Maps Plugin -->
<script src='https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js'></script>

integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="

crossorigin="" />

integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="

crossorigin=""></script>

Hello Gmaps

example

var map = new L.Map('map', {center: new L.LatLng(36.3219088　, 139.0032936), zoom: 13});

var GmapsROA = L.gridLayer.googleMutant({
    maxZoom: 24,
    type:'roadmap' //地図
});
var GmapsSAT =  L.gridLayer.googleMutant({
    maxZoom: 24,
    type:'satellite' //航空写真

}); 
var GmapsHYB = L.gridLayer.googleMutant({
    maxZoom: 24,
    type:'hybrid' //航空写真&ラベル
});
var GmapsTER  = L.gridLayer.googleMutant({
    maxZoom: 24,
    type:'terrain' //地形地図
}); 

map.addLayer(GmapsROA);
map.addControl(new L.Control.Layers({
    'Google Roadmap':GmapsROA,
    'Google Satellite':GmapsSAT,
    'Google Hybrid':GmapsHYB,
    'Google Terrain':GmapsTER
}, {}));

var map = new L.Map('map', {center: new L.LatLng(36.3219088　, 139.0032936), zoom: 13});

var GmapsROA = L.gridLayer.googleMutant({

maxZoom: 24,

type:'roadmap' //地図

});

var GmapsSAT = L.gridLayer.googleMutant({

maxZoom: 24,

type:'satellite' //航空写真

});

var GmapsHYB = L.gridLayer.googleMutant({

maxZoom: 24,

type:'hybrid' //航空写真&ラベル

});

var GmapsTER = L.gridLayer.googleMutant({

maxZoom: 24,

type:'terrain' //地形地図

});

map.addLayer(GmapsROA);

map.addControl(new L.Control.Layers({

'Google Roadmap':GmapsROA,

'Google Satellite':GmapsSAT,

'Google Hybrid':GmapsHYB,

'Google Terrain':GmapsTER

}, {}));

カスタムスタイルを使う

Google Maps API のスタイル指定機能も使えます。

Styled Maps | Google Maps JavaScript API | Google Developers

example

var map = new L.Map('map', {center: new L.LatLng(36.3219088　, 139.0032936), zoom: 13});
 
//Google Maps のスタイル指定
var styles = [{"elementType":"geometry","stylers":[{"hue":"#ff4400"},{"saturation":-68},{"lightness":-4},{"gamma":0.72}]},{"featureType":"road","elementType":"labels.icon"},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"hue":"#0077ff"},{"gamma":3.1}]},{"featureType":"water","stylers":[{"hue":"#00ccff"},{"gamma":0.44},{"saturation":-33}]},{"featureType":"poi.park","stylers":[{"hue":"#44ff00"},{"saturation":-23}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"hue":"#007fff"},{"gamma":0.77},{"saturation":65},{"lightness":99}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"gamma":0.11},{"weight":5.6},{"saturation":99},{"hue":"#0091ff"},{"lightness":-86}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"lightness":-48},{"hue":"#ff5e00"},{"gamma":1.2},{"saturation":-23}]},{"featureType":"transit","elementType":"labels.text.stroke","stylers":[{"saturation":-64},{"hue":"#ff9100"},{"lightness":16},{"gamma":0.47},{"weight":2.7}]}];
 
var GmapsROA = L.gridLayer.googleMutant({
    maxZoom: 24,
    styles:styles, //スタイルを指定
    type:'roadmap'
});
    
    
map.addLayer(GmapsROA);
map.addControl(new L.Control.Layers( {'Google':GmapsROA}, {}));

var map = new L.Map('map', {center: new L.LatLng(36.3219088　, 139.0032936), zoom: 13});

//Google Maps のスタイル指定

var styles = [{"elementType":"geometry","stylers":[{"hue":"#ff4400"},{"saturation":-68},{"lightness":-4},{"gamma":0.72}]},{"featureType":"road","elementType":"labels.icon"},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"hue":"#0077ff"},{"gamma":3.1}]},{"featureType":"water","stylers":[{"hue":"#00ccff"},{"gamma":0.44},{"saturation":-33}]},{"featureType":"poi.park","stylers":[{"hue":"#44ff00"},{"saturation":-23}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"hue":"#007fff"},{"gamma":0.77},{"saturation":65},{"lightness":99}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"gamma":0.11},{"weight":5.6},{"saturation":99},{"hue":"#0091ff"},{"lightness":-86}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"lightness":-48},{"hue":"#ff5e00"},{"gamma":1.2},{"saturation":-23}]},{"featureType":"transit","elementType":"labels.text.stroke","stylers":[{"saturation":-64},{"hue":"#ff9100"},{"lightness":16},{"gamma":0.47},{"weight":2.7}]}];

var GmapsROA = L.gridLayer.googleMutant({

maxZoom: 24,

styles:styles, //スタイルを指定

type:'roadmap'

});

map.addLayer(GmapsROA);

map.addControl(new L.Control.Layers( {'Google':GmapsROA}, {}));

カスタマイズは、「Google MapBuildr」などのサービスを利用すると便利です。

さぁこれでLeafletを使わない理由は無くなりましたね！

Leaflet.jsでGoogle Maps を表示する

Google Maps Tileを表示する

Hello Gmaps

カスタムスタイルを使う

投稿者: shimizu

“Leaflet.jsでGoogle Maps を表示する” への1件の返信