勉強したことのメモ

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でマーカーを立てて、そこから範囲●mもしくは●km ...

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

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

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

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

Google Maps APIでヒートマップを表示する方法

Google Maps APIで花粉状況や雨量を可視化しやすいようなヒートマップ ...

スマホでページ内リンクからGoogleMapアプリを開く

スマホでWebページにあるリンクをクリックした際にGoogleMapアプリを表示 ...