勉強したことのメモ

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

  関連記事

GoogleMapAPIでジオコーディングできない場合の対応方法

住所から経度緯度を取得するジオコーディングをGoogleMapAPIを用いて行お ...

GoogleMapAPIで住所・経度緯度入力後にマーカーを移動させる

フォーム内に住所・経度・緯度のテキストボックスを設置し、住所を入力後にボタンを押 ...

Google Maps APIでマーカーが全て表示されるように自動ズームする方法

Google Maps APIでマーカーを複数設置した場合にズームの値や、マーカ ...

Google Maps APIで現在地取得と目的地までのルートを表示させる方法

Google Maps APIを使って現在地を取得しつつ、目的地までのルートを表 ...

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

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