Google Maps APIでメインカラーを変更する方法
2024/01/13
GoogleMapAPIを用いたMAPでカラー変更をしたかった。カラーコードの指定があればそれに変更し、無い場合はデフォルトにしたかった。また、プラグインとかライブラリは面倒なのでjavascriptもしくはCSSで何とかしたかった。以下に方法をメモ。
マップのオプションに以下記述を加える
styles: [
{
stylers: [
{hue: "#ff0000"}//カラー変更
]
}
]
クエリにカラーコードが指定している場合は色を変更するサンプル
赤バージョン
https://taitan916.info/sample/mapcolor/?color=ff0000
デフォルトバージョン
https://taitan916.info/sample/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="https://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 Maps APIを使って現在地を取得しつつ、目的地までのルートを表 ...
-
-
Google Maps APIで都道府県の中心地と県庁所在地にマーカーを立てる方法
Google Maps APIで都道府県の中心地もしくは県庁所在地にマーカーを立 ...
-
-
HTML5のGeolocation APIで位置情報を取得してGoogleMapAPIで使用する方法
GPSみたいな位置情報を取得しGoogleMapAPIでその場所を反映させたかっ ...
-
-
Google Maps APIで複数のマーカーをまとめる方法
Google Maps APIでマーカーを複数表示し、近隣のエリアごとにまとめて ...
-
-
GoogleMapAPIでジオコーディングできない場合の対応方法
住所から経度緯度を取得するジオコーディングをGoogleMapAPIを用いて行お ...