Lopan.jp

Google Maps APIのおさらい。

Google Maps API

Webサイトで地図を表示するのに便利なGoogle マップ。Googleが提供しているGoogle Maps APIを使って、地図を設置する方法から、マーカーを置いたり、道のりを表示したり、地図の色を変えたりするためのコードをまとめました。Google Maps APIの中でも、ここではGoogle Maps JavaScript API v3を使ったサンプルを掲載します。

以下は目次です。クリックするとその項目へ移動します。

Google マップを設置する

Googleマップをイラストマップみたいにしたい。」という記事でも、「Google Maps APIの基本」として書きましたが、改めて、スニペットとして載せておきます。

公式ドキュメントは下記になりますので、詳しい解説などはそちらを参照ください。

Google Maps JavaScript API V3 チュートリアル - Google Maps API — Google Developers

※この記事で紹介しているサンプルではAPI キーを使用していませんが、ほんとは必要なのでご注意ください!
API キーの取得についてはこちらを参照のこと。

いちばん簡単なGoogle マップ

とりあえずこれだけ書けば、東京駅が中心のGoogle マップが、ブラウザいっぱいに表示されます。
(※下の「PREVIEW」はダミー画像です。画像をクリックすると、別窓でサンプルが開きます。:)

  • HTML
  • PREVIEW
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>いちばん簡単なGoogle マップ | Lopan.jp</title>
<style>
body { margin: 0; line-height: 160%; font-family: arial,sans-serif; }
html, body, #map_canvas { width: 100%; height: 100%; }
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>
function initialize() {
  var latlng = new google.maps.LatLng(35.681382, 139.766084);
  var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
</script>
</head>
<body onload="initialize();">
<div id="map_canvas"></div>
</body>
</html>

住所の座標を調べるには下記のサイトが便利です。
住所の座標とか取得するように下記ページを用意しました;)。ぜひ使ってみてくださーい:D!

GoogleMap 座標取得
Googleマップの座標とか取得したい。 - Lopan.jp

ジオコーディングなGoogle マップ

座標じゃなくて、住所を使って表示したい時にはGeocoding Service(ジオコーディング)というのが使えます。
ジオコーディングを使えば「岐阜県大垣市○○町○丁目…」みたいな住所から座標を取得してくれます。
下のサンプルでは「東京駅」としていますが、有名なランドマークとかならばその名称だけでも座標を取得してくれます。

  • HTML
  • PREVIEW
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>ジオコーディングでGoogle マップ | Lopan.jp</title>
<style>
body { margin: 0; line-height: 160%; font-family: arial,sans-serif; }
html, body, #map_canvas { width: 100%; height: 100%; }
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>
function initialize() {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': '東京駅'
  }, function(result, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var latlng = result[0].geometry.location;
      var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
       };
      var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    } else {
      alert('取得できませんでした…');
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>

ジオコーディングの公式ドキュメントは下記になります。日本語はまだみたいです(2012年9月現在)

Geocoding Service - Google Maps JavaScript API v3 — Google Developers

Google マップの読み込み方

Google マップの読み込みを行う関数(ここではinitialize)を実行するには、以下のような書き方ができます。

HTMLに記述する

<body>要素に下記のように記述して、Google マップを読み込みます。

<body onload="initialize();">

javascriptに記述する

下記のように書けば、HTMLとjavascriptを分離することができます。

google.maps.event.addDomListener(window, 'load', initialize);

※詳しくは公式ドキュメントのこちらを参照のこと。

ちなみに、上のサンプル「いちばん簡単なGoogle マップ」ではHTMLに記述する方法で、「ジオコーディングなGoogle マップ」ではjavascriptに記述する方法で、それぞれ読み込んでます。

目次に戻る

場所を示す

地図上に目印を立てて、特定の場所を示すには、マーカーアイコンが使えます。
場所の詳細情報を表示させたい時には吹き出しが出せます。

マーカーを置く

指定の場所に、Google マップのデフォルトアイコン(押しピン)を表示させます。

  • HTML
  • PREVIEW
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>マーカーを置く | Lopan.jp</title>
<style>
body { margin: 0; line-height: 160%; font-family: arial,sans-serif; }
html, body, #map_canvas { width: 100%; height: 100%; }
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>
function initialize() {
  var latlng = new google.maps.LatLng(35.681382, 139.766084);
  var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: '東京駅です!'
  });
}
</script>
</head>
<body onload="initialize();">
<div id="map_canvas"></div>
</body>
</html>

マーカーに関する公式ドキュメントは下記になります。

マーカー - Google Maps JavaScript API V3 オーバーレイ - Google Maps API — Google Developers

アイコンを置く

指定の場所に、お手製のオリジナルアイコンを表示させます。
アイコンの指定方法として、単純なアイコン複雑なアイコン がありますが、ここでは単純なアイコンの方で表示させます。
※ここではLopan cafeのアイコンを、東京駅の上に表示させます。アイコン画像の作り方についてはこちらを参照ください:)。

  • HTML
  • PREVIEW
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>アイコンを置く | Lopan.jp</title>
<style>
body { margin: 0; line-height: 160%; font-family: arial,sans-serif; }
html, body, #map_canvas { width: 100%; height: 100%; }
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>
function initialize() {
  var latlng = new google.maps.LatLng(35.681382, 139.766084);
  var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  
  var image = 'img/ico_lopan.png';
  var lopanMarker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: image
  });
}
</script>
</head>
<body onload="initialize();">
<div id="map_canvas"></div>
</body>
</html>
単純なアイコンとは

Google マップのデフォルトアイコンの代わりに、オリジナルアイコンを使用します。
アイコン画像の底辺の真ん中が、指定した座標の位置にくるように配置されます。
上のサンプルでは、右のpng画像を使用してます。※吹き出し部分が真ん中にくるように画像サイズを調整してあります。

複雑なアイコンとは

アイコンのサイズや、画像のどの位置を座標の位置にするかなど、自分で細かくカスタマイズできます。また、一枚画像からスプライトして表示させたり、アイコンと影を別々のレイヤーに表示させたりすることもできます。
下のサンプルでは、右のpng画像を使用してます。

アイコンと影を別々にする利点

下のサンプルみたいに、アイコンが跳ねたりつまめたりする時には、ちゃんと影らしく振る舞ってくれます。
shadowってプロパティは使えなくなったみたいです…(2014.7.12追記)。

  • HTML
  • PREVIEW
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>アイコンと画像を別々にする利点 | Lopan.jp</title>
<style>
body { margin: 0; line-height: 160%; font-family: arial,sans-serif; }
html, body, #map_canvas { width: 100%; height: 100%; }
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>
function initialize() {
  var latlng = new google.maps.LatLng(35.681382, 139.766084);
  var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  
  /* アイコン設定 */
  var icon = new google.maps.MarkerImage('img/ico_lopan2.png',
    new google.maps.Size(82,42),
    new google.maps.Point(0,0),
    new google.maps.Point(31,42)
  );
  var shadow = new google.maps.MarkerImage('img/ico_lopan2.png',
    new google.maps.Size(82,42),
    new google.maps.Point(0,42),
    new google.maps.Point(31,42)
  );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    shadow: shadow,
    title: 'クリックすると跳ねます',
    draggable: true,
    animation: google.maps.Animation.DROP
  };
  var marker = new google.maps.Marker(markerOptions);
  
  google.maps.event.addListener(marker, 'click', toggleBounce);
  
  function toggleBounce() {
    if (marker.getAnimation() != null) {
      marker.setAnimation(null);
      //marker.setTitle('クリックすると跳ねます');
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
      //marker.setTitle('もう一回クリックすると止まります');
   }
  }
}
</script>
</head>
<body onload="initialize();">
<div id="map_canvas"></div>
</body>
</html>

アイコンに関する公式ドキュメントは下記になります。

マーカー画像のカスタマイズ - Google Maps JavaScript API V3 オーバーレイ - Google Maps API — Google Developers

吹き出し(情報ウィンドウ)を出す

吹き出しの中に、その場所の詳細情報などを載せることができます。
※ここでは、アイコンをクリックすると吹き出しが出る仕様にします。
※JavaScriptが長くなってきたので、ここからはCSSとJavaScriptは外部ファイルとして読み込む事にします。

  • HTML
  • CSS
  • JavaScript
  • PREVIEW
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>吹き出し(情報ウィンドウ)を出す | Lopan.jp</title>
<link rel="stylesheet" href="css/sample-5.css">
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script src="js/sample-5.js"></script>
</head>
<body onload="initialize();">
<div id="map_canvas"></div>
</body>
</html>
/*
 * sample-5.css
 * 吹き出し(情報ウィンドウ)を出す | Lopan.jp
 */

body { margin: 0; line-height: 160%; font-family: arial,sans-serif; }
html, body, #map_canvas { width: 100%; height: 100%; }

#infoWindow {
  width: 250px;
}
#infoWindow h1 {
  margin: 0 0 10px;
  font-size: 16px;
}
#infoWindow p {
  margin: 0;
  font-size: 12px;
  line-height: 160%;
}
#infoWindow p span {
  font-size: 80%;
}
#infoWindow a {
  padding-right: 12px;
  border-bottom: 1px #593869 dotted;
  color: #593869;
  background: url(../img/external.gif) right center no-repeat;
  text-decoration: none;
}
#infoWindow a:hover {
  border: 0;
  color: #862682;
  background: url(../img/external_o.gif) right center no-repeat;
}
/*
 * sample-5.js
 * 吹き出し(情報ウィンドウ)を出す | Lopan.jp
 */

function initialize() {
  var latlng = new google.maps.LatLng(35.681382, 139.766084);
  var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  
  var content = '<div id="infoWindow">' +
    '<h1>情報ウィンドウ</h1>' +
    '<p>HTMLタグも使えます。<br>' +
    '<a href="http://cafe.lopan.jp/index8.html" target="_blank">Lopan cafe Webサイト<span>(未完成)</span>はこちら</a></p>' +
    '</div>';
  var infowindow = new google.maps.InfoWindow({
    content: content
  });
   
  var image = 'img/ico_lopan.png';
  var lopanMarker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: image,
    title: 'Lopan cafe'
  });
  
  google.maps.event.addListener(lopanMarker, 'click', function() {
    infowindow.open(map, lopanMarker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

吹き出し(情報ウィンドウ)に関する公式ドキュメントは下記になります。

情報ウィンドウ - Google Maps JavaScript API V3 オーバーレイ - Google Maps API — Google Developers

目次に戻る

道順を表示する

最寄り駅(出発地点)からお店(到着地点)までの道順を表示させるには、ポリラインを使う方法と、Directions Service(ルート・乗換案内)を利用する方法があります。

ポリラインで描画する

ポリラインを使えば、Google マップ上に線を描画する事ができます。
ここでは、東京駅から東京スカイツリーまでの道順をポリラインを使って描画してみました。
(※サンプルの道順は、次に紹介する「Directions Service」を使って描画されたものを参考にしてます。)

  • HTML
  • CSS
  • JavaScript
  • PREVIEW
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>ポリラインで描画する | Lopan.jp</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="js/sample-6.js"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
/*
 * style.css
 */

body { margin: 0; line-height: 160%; font-family: arial,sans-serif; }
html, body, #map_canvas { width: 100%; height: 100%; }
/*
 * sample-6.js
 * ポリラインで描画する | Lopan.jp
 */

function initialize() {
  var canter = new google.maps.LatLng(35.699,139.788);
  var mapOptions = {
    zoom: 14,
    center: canter,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  
  var station = new google.maps.LatLng(35.68140, 139.76607);
  var marker = new google.maps.Marker({
    position: station,
    map: map,
    title: '東京駅'
  });
   
  var skytree = new google.maps.LatLng(35.70964, 139.81074);
  var image = 'img/ico_lopan.png';
  var lopanMarker = new google.maps.Marker({
    position: skytree,
    map: map,
    icon: image,
    title: 'Lopan cafe'
  });
  
  var route = [
    station,
    new google.maps.LatLng(35.68171, 139.76538),
    new google.maps.LatLng(35.68215, 139.76581),
    new google.maps.LatLng(35.68250, 139.76574),
    new google.maps.LatLng(35.68304, 139.76697),
    new google.maps.LatLng(35.68438, 139.76763),
    new google.maps.LatLng(35.68365, 139.77072),
    new google.maps.LatLng(35.68260, 139.77364),
    new google.maps.LatLng(35.68438, 139.77467),
    new google.maps.LatLng(35.68860, 139.77295),
    new google.maps.LatLng(35.68999, 139.77712),
    new google.maps.LatLng(35.69219, 139.78098),
    new google.maps.LatLng(35.69546, 139.78518),
    new google.maps.LatLng(35.69937, 139.78754),
    new google.maps.LatLng(35.70191, 139.78939),
    new google.maps.LatLng(35.70606, 139.79424),
    new google.maps.LatLng(35.70888, 139.79613),
    new google.maps.LatLng(35.70982, 139.79716),
    new google.maps.LatLng(35.71083, 139.79767),
    new google.maps.LatLng(35.71306, 139.79982),
    new google.maps.LatLng(35.71512, 139.80179),
    new google.maps.LatLng(35.71292, 139.80548),
    new google.maps.LatLng(35.71149, 139.80844),
    new google.maps.LatLng(35.70974, 139.80853),
    new google.maps.LatLng(35.70953, 139.80934),
    skytree,
  ];
  var polyOptions = {
    path: route,
    strokeColor: "#0000ff",
    strokeOpacity: 0.5,
    strokeWeight: 5
  }
  var poly = new google.maps.Polyline(polyOptions);
  poly.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

ポリラインの描画には、下記サイトがとっても便利でした:D!

ポリライン作成 : おでかけマップ

ポリラインの公式ドキュメントは下記になります。

ポリライン - Google Maps JavaScript API V3 オーバーレイ - Google Maps API — Google Developers

Directions Serviceを利用する

Directions Serviceを利用すると、出発地点から到着地点までの道のりを自動で描画してくれます。果ては移動距離から所要時間まで計測してくれちゃいます:D!
「自動車でのルートDRIVING」、「徒歩でのルートWALKING」、「交通機関を使うルートTRANSIT」、「自転車でのルートBICYCLING」の4つの選べるモードが用意されています。 けど今のところ自動車でのルート徒歩でのルート以外は、日本ではまだ利用できないみたいです。たぶん(2012年9月現在)

ここでは、東京駅から東京スカイツリーまで、自動車でのルートを表示してみました。

  • HTML
  • CSS
  • JavaScript
  • PREVIEW
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>Directions Serviceを利用する | Lopan.jp</title>
<link rel="stylesheet" href="css/sample-7.css">
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="js/sample-7.js"></script>
</head>
<body>
<div id="map_canvas"></div>
<div id="directionsPanel"></div>
</body>
</html>
/*
 * sample-7.css
 * Directions Serviceを利用する | Lopan.jp
 */

body { margin: 0; line-height: 160%; font-family: arial,sans-serif; }
html, body, #map_canvas, #directionsPanel { height: 100%; }
#map_canvas { float: right; width: 70%; }
#directionsPanel { float: left; width: 30%; overflow: auto; font-size: 80%; line-height: 160%; }

@media print {
  html, body { height: auto; }
  #map_canvas { height: 650px; }
}
.adp-placemark { margin-top: 0; }
.adp-step { background: #eee; }
.adp-summary, .adp-step, .adp-substep { padding: 0.3em 0.5em; }
.adp-legal { padding: 0 0.5em; font-size: 80%; }
/*
 * sample-7.js
 * Directions Serviceを利用する | Lopan.jp
 */

var directionsDisplay;
var directionsService;
var map;

var center = new google.maps.LatLng(35.681382, 139.766084);
var start = '東京駅';
var end = '東京スカイツリー';

function initialize() {
  var mapOptions = {
    zoom: 14,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  
  directionsDisplay = new google.maps.DirectionsRenderer();
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directionsPanel'));
}

function calcRoute() {
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING,
    avoidHighways: true,
  };
  directionsService = new google.maps.DirectionsService();
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      alert('ルートが見つかりませんでした…');
    }
  });
}

google.maps.event.addDomListener(window, 'load', function() {
  initialize();
  calcRoute();
});

Directions Serviceの公式ドキュメントは下記になります。

ルート サービス - Google Maps JavaScript API v3 — Google Developers

目次に戻る

見た目をカスタマイズする。

地図上に配置されたコントロールの表示/非表示を切り替えることができます。
また、地図の色を変えたり、地名や建物を非表示にしたりなど、地図の見た目も個別に調整する事ができます。

コントロールのカスタマイズ

Google マップ上に配置されているズーム コントロールや、マップ タイプ コントロールなどの表示・非表示を切り替えたり、位置を変える事ができます。

コントロールの表示/非表示を切り替える

下記「JavaScript」の12行めコードを追記するだけで、コントロールをいっぺんに非表示にすることができます。
また、個別に表示/非表示を指定することもできます。
ここでは、一旦いっぺんに非表示にした後、ズーム コントロールスケール コントロールを表示させています。

  • HTML
  • CSS
  • JavaScript
  • PREVIEW
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>コントロールの表示/非表示を切り替える | Lopan.jp</title>
<meta name="copyright" content="Lopan.jp">
<link rel="shortcut icon" href="http://lopan.jp/favicon.ico">
<link rel="canonical" href="http://lopan.jp/google-maps-api/">
<link rel="stylesheet" href="css/style.css">
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="js/sample-10.js"></script>
</head>
<body onload="initialize();">
<div id="map_canvas"></div>
</body>
</html>
/*
 * style.css
 */

body { margin: 0; line-height: 160%; font-family: arial,sans-serif; }
html, body, #map_canvas { width: 100%; height: 100%; }
/*
 * sample-10.js
 * コントロールの表示/非表示を切り替える | Lopan.jp
 */

function initialize() {
  var latlng = new google.maps.LatLng(35.681382, 139.766084);
  var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    zoomControl: true,
    scaleControl: true
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

コントロールの位置を変える

ここでは、ストリートビュー コントロールのみ非表示にした後、マップ タイプ コントロールを左上に、ズーム コントロールを右上に移動してみました。

  • HTML
  • CSS
  • JavaScript
  • PREVIEW
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>コントロールの位置を変える | Lopan.jp</title>
<meta name="copyright" content="Lopan.jp">
<link rel="shortcut icon" href="http://lopan.jp/favicon.ico">
<link rel="canonical" href="http://lopan.jp/google-maps-api/">
<link rel="stylesheet" href="css/style.css">
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="js/sample-10-2.js"></script>
</head>
<body onload="initialize();">
<div id="map_canvas"></div>
</body>
</html>
/*
 * style.css
 */

body { margin: 0; line-height: 160%; font-family: arial,sans-serif; }
html, body, #map_canvas { width: 100%; height: 100%; }
/*
 * sample-10-2.js
 * コントロールの位置を変える | Lopan.jp
 */

function initialize() {
  var latlng = new google.maps.LatLng(35.681382, 139.766084);
  var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false,
    mapTypeControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP
    },
    zoomControlOptions: {
      position: google.maps.ControlPosition.RIGHT_TOP
    }
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

コントロールの公式ドキュメントは下記になります。

コントロール - Google Maps JavaScript API v3 — Google Developers

目次に戻る

デザインのカスタマイズ

地図のデザインにもこだわりたいなら、スタイル付き地図(Styled Maps)で地図の見た目をカスタマイズできます。
スタイル付き地図についてはこちらの記事でいろいろ解説してますので、よろしければご参照ください:)。

スタイルでは、Google マップ内の対象物に対して、「表示/非表示」や、「色相・明度・彩度」を変更することができるんですが、「コレはドコ?」という事がよくあったので、対象物を個々に見られるようなサンプルを用意してみました。
ここでは「図形(Geometory)」、「テキストラベル(Labels)」を同時に表示してますが、それらをさらに別々に扱う事もできます。

サンプルを別窓で開く

対象物を複数選択とかできたらよかったんですけど…、どうやるんだろ…X(。
複数選択できるようになりました!けどまだ不具合もあるかもしれません…X(。

「Googleマップをイラストマップみたいにしたい。」という記事では、「スタイル付き地図の色に関するオプション」とか「指定できる対象物とその子対象物」とかを画像付きでまとめてますので、よろしければそちらも参照ください:)。

スタイル付き地図の公式ドキュメントは下記になります。

スタイル付き地図 - Google Maps JavaScript API v3 — Google Developers

公式ドキュメントで紹介されているThe Styled Map Wizardでは、表示結果を確認しながらスタイルを生成することができます。詳しくは後述してます。

Google Maps API Styled Map Wizard

Google Maps API Styled Map Wizard

スタイルサンプルスニペット

サンプルとして、2つ紹介します。スタイルの部分はThe Styled Map Wizardを使って生成しました:)。
3つめ追加です(2013.8.9)※画像をクリックすると別窓で開きます。

モノクロでシンプルにキメる

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>スタイルサンプルスニペット - モノクロでシンプルにキメる | Lopan.jp</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="js/sample-9-1.js"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
/*
 * style.css
 */

body { margin: 0; line-height: 160%; font-family: arial,sans-serif; }
html, body, #map_canvas { width: 100%; height: 100%; }
/*
 * sample-9-1.js
 * スタイルサンプルスニペット - モノクロでシンプルにキメる | Lopan.jp
 */

function initialize() {
  var latlng = new google.maps.LatLng(35.681382, 139.766084);
  var myOptions = {
    zoom: 14,
    center: latlng,
    mapTypeControlOptions: { mapTypeIds: ['mono', google.maps.MapTypeId.ROADMAP] }
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  
  /* スタイル付き地図 */
  var styleOptions = [ { 'elementType': 'geometry', 'stylers': [ { 'gamma': 0.8 }, { 'saturation': -100 }, { 'visibility': 'simplified' }, { 'lightness': 20 } ] },{ 'elementType': 'labels', 'stylers': [ { 'visibility': 'off' } ] },{ 'featureType': 'poi.park', 'elementType': 'geometry', 'stylers': [ { 'lightness': 30 }, { 'visibility': 'on' } ] },{ 'featureType': 'road.highway', 'elementType': 'geometry', 'stylers': [ { 'visibility': 'simplified' } ] },{ 'featureType': 'landscape', 'elementType': 'geometry', 'stylers': [ { 'visibility': 'off' } ] },{ 'featureType': 'road', 'stylers': [ { 'lightness': 100 } ] },{ 'featureType': 'transit.line', 'elementType': 'geometry', 'stylers': [ { 'visibility': 'on' }, { 'lightness': 30 } ] },{ 'featureType': 'poi.business', 'elementType': 'geometry', 'stylers': [ { 'lightness': -10 }, { 'visibility': 'on' } ] } ];
  var styledMapOptions = { name: 'モノクロでシンプルにキメる' }
  var monoType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  map.mapTypes.set('mono', monoType);
  map.setMapTypeId('mono');
}
google.maps.event.addDomListener(window, 'load', initialize);

ファンシーであったかい感じ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>スタイルサンプルスニペット - ファンシーであったかい感じ | Lopan.jp</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="js/sample-9-2.js"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
/*
 * style.css
 */

body { margin: 0; line-height: 160%; font-family: arial,sans-serif; }
html, body, #map_canvas { width: 100%; height: 100%; }
/*
 * sample-9-2.js
 * スタイルサンプルスニペット - ファンシーであったかい感じ | Lopan.jp
 */

function initialize() {
  var latlng = new google.maps.LatLng(35.681382, 139.766084);
  var myOptions = {
    zoom: 14,
    center: latlng,
    mapTypeControlOptions: { mapTypeIds: ['fancy', google.maps.MapTypeId.ROADMAP] }
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  
  /* スタイル付き地図 */
  var styleOptions = [ { 'elementType': 'labels', 'stylers': [ { 'visibility': 'off' } ] },{ 'elementType': 'geometry', 'stylers': [ { 'hue': '#ff4d00' }, { 'gamma': 0.8 } ] },{ 'featureType': 'water', 'elementType': 'geometry', 'stylers': [ { 'hue': '#00ccff' }, { 'saturation': 10 }, { 'lightness': 20 } ] },{ 'featureType': 'road.arterial', 'elementType': 'geometry', 'stylers': [ { 'lightness': 100 }, { 'visibility': 'on' } ] },{ 'featureType': 'landscape', 'elementType': 'geometry', 'stylers': [ { 'visibility': 'simplified' }, { 'lightness': -5 }, { 'saturation': 50 }, { 'hue': '#ffe500' } ] },{ 'featureType': 'transit.line', 'elementType': 'geometry', 'stylers': [ { 'visibility': 'on' }, { 'gamma': 0.6 }, { 'lightness': 30 }, { 'saturation': 40 } ] },{ 'featureType': 'landscape.man_made', 'elementType': 'geometry', 'stylers': [ { 'hue': '#ff0000' }, { 'lightness': 40 }, { 'visibility': 'off' } ] },{ 'featureType': 'poi', 'elementType': 'geometry', 'stylers': [ { 'visibility': 'off' } ] },{ 'featureType': 'poi.park', 'elementType': 'geometry', 'stylers': [ { 'visibility': 'simplified' }, { 'hue': '#ccff00' }, { 'lightness': 10 }, { 'saturation': 30 } ] },{ 'featureType': 'road.highway', 'elementType': 'geometry', 'stylers': [ { 'visibility': 'on' }, { 'saturation': 100 }, { 'gamma': 0.8 }, { 'lightness': 50 }, { 'hue': '#ff8800' } ] },{ 'featureType': 'road.local', 'stylers': [ { 'hue': '#ff0000' }, { 'visibility': 'simplified' }, { 'lightness': 100 } ] },{ 'featureType': 'transit.station', 'elementType': 'geometry', 'stylers': [ { 'saturation': 50 }, { 'lightness': 20 }, { 'visibility': 'on' }, { 'hue': '#ff0000' } ] },{ 'featureType': 'poi.business', 'elementType': 'geometry', 'stylers': [ { 'hue': '#ff0000' }, { 'saturation': 80 }, { 'visibility': 'on' } ] },{ 'featureType': 'road', 'elementType': 'labels.text', 'stylers': [ { 'visibility': 'on' }, { 'lightness': 10 }, { 'hue': '#ff8000' }, { 'saturation': 80 }, { 'gamma': 0.8 } ] },{ 'featureType': 'road', 'elementType': 'labels.text.stroke', 'stylers': [ { 'color': '#ffffff' }, { 'weight': 3 } ] } ];
  var styledMapOptions = { name: 'ファンシーであったかい感じ' }
  var fancyType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  map.mapTypes.set('fancy', fancyType);
  map.setMapTypeId('fancy');
}
google.maps.event.addDomListener(window, 'load', initialize);

フラットデザイン

流行りのフラットデザインぽくすることもできますねー。こちらのページで紹介されてました!

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>スタイルサンプルスニペット - フラットデザイン | Lopan.jp</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="js/sample-9-3.js"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
/*
 * style.css
 */

body { margin: 0; line-height: 160%; font-family: arial,sans-serif; }
html, body, #map_canvas { width: 100%; height: 100%; }
/*
 * sample-9-3.js
 * スタイルサンプルスニペット - フラットデザイン | Lopan.jp
 */

function initialize() {
  var latlng = new google.maps.LatLng(35.681382, 139.766084);
  var myOptions = {
    zoom: 14,
    center: latlng,
    mapTypeControlOptions: { mapTypeIds: ['flat', google.maps.MapTypeId.ROADMAP] }
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  
  /* スタイル付き地図 */
  var styleOptions = [
    { 'stylers': [{ 'visibility': 'off' }] },
    { 'featureType': 'road', 'stylers': [{ 'visibility': 'on' }, { 'color': '#ffffff' }] },
    { 'featureType': 'road.arterial', 'stylers': [{ 'visibility': 'on' }, { 'color': '#fee379' }] },
    { 'featureType': 'road.highway', 'stylers': [{ 'visibility': 'on' }, { 'color': '#fee379' }] },
    { 'featureType': 'landscape', 'stylers': [{ 'visibility': 'on' }, { 'color': '#f3f4f4' }] },
    { 'featureType': 'water', 'stylers': [{ 'visibility': 'on' }, { 'color': '#7fc8ed' }] },
    { 'featureType': 'road', 'elementType': 'labels', 'stylers': [{ 'visibility': 'off' }] },
    { 'featureType': 'poi.park', 'elementType': 'geometry.fill', 'stylers': [{ 'visibility': 'on' }, { 'color': '#83cead' }] },
    { 'featureType': 'poi.business', 'elementType': 'geometry', 'stylers': [{ 'visibility': 'on' }] },
    { 'elementType': 'labels', 'stylers': [{ 'visibility': 'off' }] },
    { 'featureType': 'transit.line', 'elementType': 'geometry.fill', 'stylers': [{ 'visibility': 'on' }, { 'hue': '#e3b552' }] },
    { 'featureType': 'transit.line', 'elementType': 'geometry.stroke', 'stylers': [{ 'visibility': 'on' }, { 'weight': 1.2 }, { 'color': '#9660ac' }, { 'lightness': 25 }] },
    { 'featureType': 'landscape.man_made', 'elementType': 'geometry', 'stylers': [{ 'weight': 0.9 }, { 'visibility': 'off' }] }
  ];
  var styledMapOptions = { name: 'フラットデザイン' }
  var flatType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  map.mapTypes.set('flat', flatType);
  map.setMapTypeId('flat');
}
google.maps.event.addDomListener(window, 'load', initialize);

ざらざらペーパーノイズ

表面にざらざら質感を加えてみましたー:D。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>スタイルサンプルスニペット - ざらざらペーパーノイズ | Lopan.jp</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="js/sample-9-4.js"></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
/*
 * style.css
 */

body { margin: 0; line-height: 160%; font-family: arial,sans-serif; }
html, body, #map_canvas { width: 100%; height: 100%; }
/*
 * sample-9-4.js
 * スタイルサンプルスニペット - ざらざらペーパーノイズ | Lopan.jp
 */

function TextureMapType(tileSize) {
  this.tileSize = tileSize;
}
TextureMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.background = 'url(./img/paper_noise.png)';
  div.style.backgroundSize = '256px 256px';
  return div;
};
function initialize() {
  var latlng = new google.maps.LatLng(35.681382, 139.766084);
  var myOptions = {
    zoom: 14,
    center: latlng,
    mapTypeControlOptions: { mapTypeIds: ['flat', google.maps.MapTypeId.ROADMAP] }
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  
  /* オーバーレイ マップタイプを挿入 */
  map.overlayMapTypes.insertAt(0, new TextureMapType(new google.maps.Size(256, 256)));
  
  /* スタイル付き地図 */
  var styleOptions = [
    { 'elementType': 'labels', 'stylers': [{ 'visibility': 'off' }] },
    { 'elementType': 'geometry', 'stylers': [{ 'color': '#c1e9f9' }] },
    { 'featureType': 'water', 'stylers': [{ 'color': '#92c6e1' }] },
    { 'featureType': 'landscape', 'elementType': 'geometry', 'stylers': [{ 'color': '#fafafa' }] },
    { 'featureType': 'poi', 'elementType': 'geometry', 'stylers': [{ 'color': '#c1e9f9' }] },
    
    { 'featureType': 'road', 'elementType': 'labels.text', 'stylers': [{ 'visibility': 'on' }, { 'saturation': -100 }, { 'lightness': 20 }, { 'weight': 4 }] },
    { 'featureType': 'road', 'elementType': 'geometry', 'stylers': [{ 'visibility': 'simplified' }, { 'color': '#dddddd' }] },
    { 'featureType': 'road.highway', 'elementType': 'geometry', 'stylers': [{ 'color': '#cccccc' }] },
    
    { 'featureType': 'transit.line', 'elementType': 'geometry.stroke', 'stylers': [{ 'color': '#336292' }] },
    { 'featureType': 'transit.line', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#fafafa' }] }
  ];
  var styledMapOptions = { name: 'ペーパー' }
  var flatType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  map.mapTypes.set('flat', flatType);
  map.setMapTypeId('flat');
}
google.maps.event.addDomListener(window, 'load', initialize);

目次に戻る

The Styled Map Wizard

The Styled Map Wizard

パッと見複雑ですが、分かってしまえば、いろいろイジれて楽しいです:)。
スタイルの設定は左側の「編集パネル(Selectors)」で行います。
スタイルは対象物単位で設定します。右側の「スタイル一覧(Map Style)」に、どんどん追加できます。

編集できる内容については下図の通り。

編集内容

Feature typeElement typeの中身は下図のようになってます。

Feature typeとElement typeの内容

操作手順(2012年9月現在)

  1. 例えば下図のように、「Element type(スタイルを適用したい対象物)」から「Labels(テキストやラベル)」を選択し、「Stylers」の「Visibility(表示/非表示の切り替え)」を「Off」にチェック。すると、地図上から文字が消えます。

    The Styled Map Wizardを使って文字を消してみる
  2. 右上の「Add」ボタンをクリックすると、一覧に新規スタイルが追加されます。
    「Element type」から「Geometory(線や図形)」を選択し、「Saturation(彩度)」に「-100」と入力。すると地図がモノクロになります。

    The Styled Map Wizardを使ってモノクロにしてみる
  3. 「これでよし」となったら「Show JSON」ボタンをクリックして、コードを書き出します。
    ※「Static Map」ボタンをクリックすると、こんな画像と、画像へのパス(URL)が生成されます。

    コードも画像も自動生成
  4. 生成されたコードの[]の中身(2行めから最後から2行めまで)を、下記へコピペしたらできあがり:D。

function initialize() {
  var latlng = new google.maps.LatLng(35.681382, 139.766084);
  var myOptions = {
    zoom: 14,
    center: latlng,
    mapTypeControlOptions: { mapTypeIds: ['mono', google.maps.MapTypeId.ROADMAP] }
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  
  /* スタイル付き地図 */
  var styleOptions = [
	
    ここにコピペ。
	
  ];
  var styledMapOptions = { name: 'モノクロマップ' }
  var monoType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  map.mapTypes.set('mono', monoType);
  map.setMapTypeId('mono');
}
google.maps.event.addDomListener(window, 'load', initialize);

※地図で使用した「東京駅」と「Lopan cafe」とは一切関係がありませんので、あしからず。

  • このエントリーをはてなブックマークに追加
  • ツイート

Comment & Pingback

4 Comments! for Google Maps APIのおさらい。

  1. ピンバック: Googleマップのカスタマイズ / yuheijotaki.com

  2. _watercolor

    Google Maps APIのJavaScriptのURLを、こっそり「http://maps.google.com/maps/api/js?sensor=true」から「http://maps.googleapis.com/maps/api/js?sensor=true」に修正しました。
    ずっとそのままにしててごめんなさい…X(。

    Reply

  3. ピンバック: Google マップのカスタマイズ / yuheijotaki.com

コメントを残す

*がついている欄は必須項目です。