GoogleMapのカラーデザインを変えてサイトになじませる
サイト内で場所を紹介するときにはGoogleMapを使うのが当たり前になりました。昔はイラストレーターで地図を作ってたんですけどね。GoogleMapは便利ではあるものの、サイトによってはもっとオシャレにみせたいことがありますが、今日はそんな時のデザインアレンジの方法についてご紹介します。
APIキーを取得
2016年6月から、GoogleMapをサイト内に埋め込むにはAPIキーが必要になりました。まずはGoogleMapを使うためのキーをこちらから作ります。
サイト内にGoogleMapを表示する
iframeでサイト内に表示するだけなら、公式のクイックスタートマップがかんたんです。ただ今回はデザインをカスタマイズするので、JavaScriptで埋め込む方法を使います。
こちらに公式のサンプルがあります。
このように見た目が変わってオシャレです。
<!DOCTYPE html>
<html>
<head>
<title>Styled Maps - Night Mode</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// Styles a map in night mode.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.674, lng: -73.945},
zoom: 12,
styles: [
{elementType: 'geometry', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{color: '#263c3f'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#6b9a76'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#38414e'}]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{color: '#212a37'}]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{color: '#9ca5b3'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#746855'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#1f2835'}]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{color: '#f3d19c'}]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [{color: '#2f3948'}]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{color: '#17263c'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#515c6d'}]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{color: '#17263c'}]
}
]
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>
stylesの色のところを触っていけば好みに応じて変更できます。
さらに！SnazzyMapsというサービスにはカラーカスタマイズ例が豊富にありまして、コピペで好きなデザインを使えます。便利。
PROFILE
プロフィール
サービスで世界をよりよくするために挑戦中。個をエンパワーメントするプロダクトをつくっています。個人開発コミュニティ「入江開発室」を運営（約300名） / MENTAなど20個以上のプロダクトを開発。
（詳しいプロフィール）
PRODUCT
イリテクで開発したプロダクト
RELATION
関連する記事
自分で作ったアイコン(SVG)をWEBフォント化する
WEBサイトのメニューやリンクでは、アイコンやボタンで画像を使う機会が減りました。スマホや高精細なPCのディスプレイなど閲覧環境が多様化し、...
SynologyNASでできる！複数のローカルPC開発環境で同じDBを共有する
SynologyNASにはMySQLを入れることができます。ただのNASではありません。ということで今回は複数のローカルPCにてDBを共有す...
さよならインタフェース。最高のUI／UXはNoUIだ。
ひさびさにUI・UXについて考えさせられる本を読みました。 WEBサービスやアプリなど、プロダクトをつくっているデザイナー・プログラマーそし...
画面間の遷移図をイケてる風にしてくれるSketch Resource。ワイヤーフレームの作成にも。
いい感じのSketchファイルを見つけたのでご紹介。Sketchでワイヤーフレーム＋デザインをつくっていますが、そんな時に使えるリソース。必...
ほれぼれする美しい「ログイン画面」のデザインを集めてみた
WEBサービス開発が大好きな入江です。 Twitterでつぶやいたことをきっかけに、新しいWEBサービスを企画中です。 https://tw...
