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>
関連記事
-
-
スマホでページ内リンクから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を色々勉強した中で感じたメリットとデメリット ...