Leaflet.jsでGoogle Maps を表示する

2015/07/16 - Google Map API, leaflet.js

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

Google Maps Tileを表示する

LeafletでGoogle Mapsの地図を表示するにはプラグインを使う必要があります。
Leaflet pluginsをダウンロードし、「layerフォルダ→tileフォルダ」の中のGoogle.jsを読み込んでください。
また、leaflet以外にGoogle Maps APIも読み込む必要があります。

<!-- Google Maps API -->
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>

<!-- Leaflet -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet-src.js"></script>

<!-- Leaflet Google Maps Plugin -->
<script src="Google.js"></script>

Hello Gmaps

example

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

var GmapsROA = new L.Google('ROADMAP'); //地図
var GmapsSAT = new L.Google('SATELLITE'); //航空写真
var GmapsHYB = new L.Google('HYBRID');	//航空写真&ラベル
var GmapsTER = new L.Google('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 = new L.Google('ROADMAP'); //地図

var GmapsSAT = new L.Google('SATELLITE'); //航空写真

var GmapsHYB = new L.Google('HYBRID'); //航空写真&ラベル

var GmapsTER = new L.Google('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 gMaps= new L.Google('ROADMAP', {
	mapOptions: {
		styles: styles
	}
});
map.addLayer(gMaps);
map.addControl(new L.Control.Layers( {'Google':gMaps}, {}));

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 gMaps= new L.Google('ROADMAP', {

mapOptions: {

styles: styles

}

});

map.addLayer(gMaps);