GoogleMapでメインカラーを変更する方法

2015/05/19 2021/03/11

GoogleMapAPIを用いたMAPでカラー変更をしたかった。カラーコードの指定があればそれに変更し、無い場合はデフォルトにしたかった。また、プラグインとかライブラリは面倒なのでjavascriptもしくはCSSで何とかしたかった。以下に方法をメモ。

■マップのオプションに以下記述を加える

styles: [
	{
		stylers: [
			{hue: "#ff0000"}//カラー変更
		]
	}
]

■クエリにカラーコードが指定している場合は色を変更するサンプル

・赤バージョン

http://sample.taitan916.info/mapcolor/?color=ff0000

・デフォルトバージョン

http://sample.taitan916.info/mapcolor/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>マップのカラー変更サンプル</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
#map_canvas {
	width: 100%;
	height: 100%;
	font-size : 12px;
	font-family : Verdana;
	color : black;
}
html{height:100%;}
body{
	height:100%;
	margin:0px;
	font-family: Helvetica,Arial;
}
</style>
</head>
<body>
	<div id="map_canvas"></div>
	<script>
	var currentWindow = null;
	var latlng = new google.maps.LatLng(34.687315,135.526201);

	var myOptions = {
		zoom: 16, 
		center: latlng, 
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		<?php if( $_GET['color'] ){ ?>
		styles: [
			{
				stylers: [
					{hue: "#<?php echo $_GET['color'];?>"}//カラー変更
				]
			}
		]
		<?php } ?>
	};

	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //map生成

	var mapData = {
		'x':'34.687315', 
		'y':'135.526201',
		'balloon':'大阪城'
	};
	makeMarker(mapData);

	//マーカー作成
	function makeMarker( mapData ){
		var marker = new google.maps.Marker({
			position : new google.maps.LatLng(mapData.x,mapData.y), 
			map: map
		});

		var infoWindow = new google.maps.InfoWindow();
		google.maps.event.addListener(marker, 'click', function() {
			if (currentWindow) {
				currentWindow.close();
			}
			infoWindow.setContent(mapData.balloon);
			infoWindow.open(map,marker);
			currentWindow = infoWindow;
		});
	}
	</script>
</body>
</html>

- Google Maps API, Google

: スマホでページ内リンクからGoogleMapアプリを開く

スマホでWebページにあるリンクをクリックした際にGoogleMapアプリを表示 ...

: GASとLINEを連携させて通知を送る

Google Apps ScriptとLINEを連携させ、LINEに何らかの通知 ...

: GoogleMapAPIで現在地を更新する方法

GoogleMapAPIを使って現在地を取得してその場所にマーカーを設置、その後 ...

: GoogleMapでマーカーをまとめる

GoogleMapAPIでマーカーを複数表示し、近隣のエリアごとにまとめて表示さ ...

: androidでgeolocationを使うとtimeoutになる

Geolocation APIを用いて現在地をGoogleMapに表示させるとい ...

: GASで「カクヨム」の更新状況をスクレイピングで取得する

Google Apps Scriptの勉強として「カクヨム」の指定した小説が更新 ...

: GoogleMapAPIで現在地取得と目的地までのルート表示

GoogleMapAPIを使って現在地を取得しつつ、目的地までのルートを表示させ ...

: GoogleMapで半径●メートルを範囲表示

GoogleMapでマーカーを立てて、そこから範囲●mもしくは●kmを円で表示さ ...

: GASで「小説家になろう」サイトの更新通知をLINEに送る

Google Apps Scriptの勉強として「小説家になろう」サイトの特定小 ...

: GASを使ってみて感じたメリットとデメリット

Google Apps Scriptを色々勉強した中で感じたメリットとデメリット ...

PREV: GoogleMapAPIで現在地を更新する方法
NEXT: UTF-16にエンコードされている文字列をUTF-8へデコード

GoogleMapでメインカラーを変更する方法

関連記事