勉強したことのメモ

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でマーカーが全て表示されるように自動ズームする方法

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

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

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

GoogleMapAPIのジオコードで存在するはずの住所が見つからない場合の原因について(ZERO_RESULTS)
GoogleMapAPIのジオコードで存在するはずの住所が見つからない場合の原因について(ZERO_RESULTS)

GoogleMapAPIを利用したプログラムで確かに存在するはずの住所をジオコー ...

Google Maps APIで住所から経度緯度を取得する方法
Google Maps APIで住所から経度緯度を取得する方法

やりたかった事はformに住所を入れてsubmitする際に、javascript ...