筋トレストレッチレシピ糖質制限ドバイ旅行記クラロワ

白黒のGoogleマップを出力する方法

スポンサーリンク

白黒のGoogleマップを出力する方法

白黒Googleマップを出力したい。と言われたので調べてみた。

サイトのデザインの問題でGoogleマップを白黒のもを出したいときってありますよね。

どうやら出来そうだ。

googlemapのjsを呼び出す際に、パラメータで色のこさを変更することで出来る。

Google Maps でスタイリッシュな白黒地図を作成する – HDRiな生活
http://hdri.iwalk.jp/2011/12/building328.php

 

こちらを参考に

白黒を作成するのでほとんどの要素を saturation:-100 に設定

 

 

他の要素も邪魔だから取りたいと言われそうなのでこちらのドキュメントも読んで置くといいかも

Googleマップをイラストマップみたいにしたい。
http://lopan.jp/google-map-customize/

こちらの記事では、+や-など拡大の要素を排除する方法

オブジェクトを置く方法も説明している。

 

文章量が多いので簡単に説明すると

Google map APIを読み込むには、

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

こちらのjsを読み込むことで 動くようになる。
更に、どこの座標のものを出すかという jsを加え
このjsには、パラメータが色々設定されているのでその部分をいじってあげることで色々出来るよってことです。

座標を調べる方法
任意の場所の緯度と経度の取得方法 – Google Maps API入門
http://www.ajaxtower.jp/googlemaps/gmap2/index4.html

作ってみたサンプル

サンプルデモ

<!doctype html>
<html lang="ja"><head></head>
 
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
 
<body onload="initialize()">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
<!--
var map;
var tokyo = new google.maps.LatLng(35.6751693,139.7609672);
 
function initialize() {
 
	//地図上の各要素の設定。白黒を作成するのでほとんどの要素を saturation:-100 に設定。
	//不要な情報は非表示(visibility: "off")にしちゃう
	//色の濃さは lightnessプロパティで変更する。
	var stylez = [
	{
	featureType:"transit.station",stylers:[{visibility: "off" }]},
	{
	featureType: "transit",stylers: [{ saturation: -100 }]},
	{
	featureType: "transit",elementType: "labels",stylers: [{ saturation: -100 }]},
	{
	featureType: "administrative",stylers: [{ visibility: "on" }]},
	{
	featureType: "landscape",stylers: [{ visibility: "on" }]},
	{
	featureType: "poi",stylers: [{ visibility: "off" }]},
	{
	featureType: "water",elementType: "labels",stylers: [{ visibility: "on" }]},
	{
	featureType: "water",stylers: [{ saturation: -100 }]},
	{
	featureType: "road",elementType: "labels",stylers: [{ visibility: "on" }]},
	{
	featureType: "road",stylers: [{ saturation: -100 },{ lightness: 100 }]},
	{
	featureType: "landscape",stylers: [{ saturation: -100 },{ lightness: -10 }]}
	];
 
 
 
	var mapOptions = {
	zoom: 17,
	center: tokyo
	};
 
 
	map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
 
 
	var styledMapOptions = {
	map: map,
	name: "Hip-Hop"
	}
 
	var jayzMapType =new google.maps.StyledMapType(stylez,styledMapOptions);
 
	map.mapTypes.set('hiphop', jayzMapType);
	map.setMapTypeId('hiphop');
 
 
 
	centraal.setMap(map);
}
//-->
</script>
<div id="map_canvas" style="width: 1024px; height: 400px;"></div>
</body>
</html>

追記。
これだけだとどこにあるのかわからなかったのでこちらの記事を見ながらポイントも置いた。
Google Map を簡単お洒落にカスタマイズ!「Styled Map Wizard」使ってみた。 | バシャログ。
http://c-brains.jp/blog/wsg/13/02/12-104000.php

スポンサーリンク

\ SNSでシェアしよう! /

タグ:

スポンサーリンク

ankerのライトニングケーブル
anker充電機器
この記事を書いたのはです!
アットトリップです。このブログの管理人です。
著書:Facebookコミニティ成功の法則

白黒のGoogleマップを出力する方法

白黒のGoogleマップを出力する方法

タグ:

スポンサーリンク

記事URL
https://attrip.jp/127964/


フォローよろしくお願いいたします。

mautic is open source marketing automation
お問い合わせこのサイトについてサイトマップ広告のご掲載について
おもしろ動画レシピ筋トレストレッチ糖質制限ダイエット