UPDATE：2017.11.4
- CATEGORY
GoogleMapのデザイン
WEB制作では欠かせないMAPの挿入！最近ではデザイン性の高いMAPを要求されることが増えてきましたので、
本日はGoogleMapのカラー指定をコピペできるようにご紹介します！
function initialize() {
var myLatLng = new google.maps.LatLng(マップの中心座標);
var myOptions = {
zoom: 17, //ズームレベル
center: myLatLng,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'style']
}
};
map = new google.maps.Map(document.getElementById("maparea"), myOptions);
new google.maps.Marker({
position: new google.maps.LatLng(マップの中心座標),
map: map,
icon: {
url: "アイコンのURL",
scaledSize: new google.maps.Size(80, 60),
},
});
var mapstyle =
//start
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#d5d0b7"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": ""
}
]
},
{
"featureType": "administrative.land_parcel", //土地区画
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d5d0b7"
}
]
},
{
"featureType": "poi", //誰かが興味をもった場所
"elementType": "geometry",
"stylers": [
{
"color": "#d5d0b7"
}
]
},
{
"featureType": "poi", //誰かが興味をもった場所
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park", //公園
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park", //公園
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road", //道路
"elementType": "geometry",
"stylers": [
{
"color": "#f8efd2"
}
]
},
{
"featureType": "road.arterial", //幹線道路
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway", //高速道路
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway", //高速道路
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local", //地方道路
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit.line", //交通機関の路線
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station", //駅
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water", //海、湖、池や川など見ずのあるところ
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water", //海、湖、池や川など見ずのあるところ
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
]
//end
;
var mapType = new google.maps.StyledMapType(mapstyle, myOptions);
map.mapTypes.set('style', mapType);
map.setMapTypeId('style');
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=APIキー&callback=initialize";
document.body.appendChild(script);
}
google.maps.event.addDomListener(window, 'load', initialize);上記のコードで下のMAPが出来上がり！
参考サイト：スタイル付き地図
