勉強したことのメモ

webプログラマが勉強したことのメモ。

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

      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を色々勉強した中で感じたメリットとデメリット ...