勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Google Maps APIでメインカラーを変更する方法

   2024/01/13  Google Maps API Google

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

  関連記事

Google Maps APIとPHPを組み合わせて複数マーカーとウィンドウを連携させる方法
Google Maps APIとPHPを組み合わせて複数マーカーとウィンドウを連携させる方法

やりたかった事は以下の通り。 mysqlから経度緯度、マーカー名、マーカーIDを ...

Advanced Custom FieldsでGoogleMapの使用する方法
Advanced Custom FieldsでGoogleMapの使用する方法

Advanced Custom FieldsでGoogleMapを使用したかった ...

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

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

HTML5のGeolocation APIで位置情報を取得してGoogleMapAPIで使用する方法
HTML5のGeolocation APIで位置情報を取得してGoogleMapAPIで使用する方法

GPSみたいな位置情報を取得しGoogleMapAPIでその場所を反映させたかっ ...

Google Maps APIで複数のマーカーをまとめる方法
Google Maps APIで複数のマーカーをまとめる方法

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