勉強したことのメモ

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で複数のマーカーをまとめる方法

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

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

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

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

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

GoogleMapAPIでマップ自体を移動し中心地の経度緯度を取得

GoogleMapでマップ自体をドラッグして移動した後、中心地の経度緯度を取得し ...

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

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