Google Mapsをグレースケールにして表示するのは著作権違反の可能性があります

WEB制作
Google Mapsをグレースケールにして表示するのは著作権違反の可能性があります

現在、いくつかのサイトでGoogle Maps PlatformのAPIを使用せずにCSSを使用して、グレースケールに変更する方法が紹介されていますが、Google Maps PlatformのAPIを使用せずにCSSで地図をグレースケールに変更して掲載することは、著作物の改変に当たり、著作権侵害で著作者から訴えられる可能性があります。

Google Mapsの色を変更して掲載したい場合には、Google Maps PlatformのAPIを利用して地図の色を変更する用に心がけましょう。

目次

Google Maps PlatformのAPIを利用して地図をグレースケールにする方法

Google Mapsは、Maps JavaScript APIを利用することで地図の色を変更することができます。

Maps JavaScript APIを使用して、Google Mapsの地図の色をグレースケールに変更する方法を紹介します。

APIキーの発行

まず、Google Maps Platformに登録しMaps JavaScript APIのAPIキーを発行します。

SDKの読み込み

Maps JavaScript APIを使用するためにHPにSDKを追加します。

<script src="https://maps.googleapis.com/maps/api/js?key=YUR_PUBLIC_API_KEY"></script>

Google Mapsの埋め込み

Maps JavaScript APIを使用して、地図を埋め込みます。

<div id="gmaps"></div>
google.maps.event.addDomListener(window, 'load', () => {
    const latlng = new google.maps.LatLng(34.646512, 133.9053416);

    const mapOptions = {
        zoom: 17,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };

    const map = new google.maps.Map(document.getElementById('gmaps'), mapOptions);

    const mapMarker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'タイトル',
    });

    const mapStyleOptions = [{
        stylers: [{
            saturation: -100,
        }]
    }];

    const lopanType = new google.maps.StyledMapType(mapStyleOptions);

    map.mapTypes.set('exmaple', lopanType);
    map.setMapTypeId('exmaple');
});

参考サイト