webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

Google Maps APIを使ってアイコンや色味のカスタマイズ

Google Maps Javascript APIを使用する事で、Googleマップの色味を変えたり、ピンを会社やお店のロゴ画像に変えたりする事が出来ます。


通常のgooglemap
f:id:yachin29:20171019202505p:plain


カスタマイズしたGoogleMap
f:id:yachin29:20171019204841p:plain


GoogleMap APIキーの取得

Google Maps Javascript APIを使用するためにまずはAPIキーを取得する必要があります。
developers.google.com



APIキーの使用制限設定

APIキーの使用制限をしないと誰でもAPIキーを使えてしまうので、使用範囲を制限しておきます。
APIキー生成画面右下の「API Console」をクリックします。
webサイトで使う場合、「HTTP リファラー(ウェブサイト) 」を選択します。
ここではAPIキーを使用するサイトを入力します。
例えば、「http://yachin.com/」以下で使用したい場合は「http://yachin.com/*」のように設定します。

しかしこのままだとローカルで確認しながらの作業が出来ないので、xampp等のでも確認出来る様にローカル様のAPIキーも取得しておきましょう。


f:id:yachin29:20171024130443p:plain

目的地の緯度・経度を取得

目的地の緯度・経度を取得をGoogleMapで取得しましょう。

オリジナルのピンを作成

イラストレーター等でピン画像を作りましょう。サイズは後でスクリプトで調整するので適当で大丈夫ですが必ず偶数にしましょう。

Googleマップの色味を変える

Googleマップの色味を変更するだけで、大きく印象を変えることができます。
地図の色味のカスタマイズはGoogle Maps APIgoogle.maps.Mapのstylersを使用します。
stylersの項目hue(色相)、saturation(彩度)、lightness(明度)、gamma(ガンマ値)をそれぞれ設定しています。


記述方法

まずはhtmlに必要な記述をしていきます

<body onload="mapLoad();">

<div id="map_wrapper">
ここに地図データが生成されます。
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=ここにAPIキーが入ります"></script>
<script src="js/map.js"></script>
</body>

map.jsの記述

function mapLoad() {
    /*----------基本的なカスタマイズ----------*/
  var latlng = new google.maps.LatLng(35.725930, 139.713868);/*経度、緯度*/

  var myOptions = {
    zoom: 17, /*拡大比率*/
    center: latlng, /*表示枠内の中心点*/
    mapTypeControlOptions: { mapTypeIds: ['noText', google.maps.MapTypeId.ROADMAP] },/*表示タイプの指定*/
    disableDefaultUI: false, /*デフォルトのUIを無効*/
    scrollwheel: false /*スクロールでズームされるのを無効*/
  };
  
  var map = new google.maps.Map(document.getElementById('map_wrapper'), myOptions);

  /*----------スタイルのカスタマイズ----------*/
  var styleOptions =
  [
    {
      featureType: "all",/*どんなものにスタイルを設定するか(ここではすべてのもの)*/
      elementType: "all",/*どんなものにスタイルを設定するか(ここではすべてのもの)*/
      stylers: [
        { hue: "#e0dcd1" },/*色*/
        { lightness: -5 },/*明度*/
        { saturation: -90 }/*彩度*/
      ]
    }
  ];
 var styledMapOptions = { }
  var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  map.mapTypes.set('sample', sampleType);
  map.setMapTypeId('sample');

/*----------アイコンの取得----------*/
var icon = new google.maps.MarkerImage('img/icon.png',//表示させたいページから見たパス
new google.maps.Size(270,74), //アイコンサイズ
new google.maps.Point(0,0), //起点
new google.maps.Point(135,74) //アイコンの位置
);

/*----------マーカーの設置----------*/
var markerOptions = {
  position: latlng,/*表示場所と同じ位置に設置*/
  map: map,
  icon: icon,
};
var marker = new google.maps.Marker(markerOptions);

}

さらに細かいカスタマイズも出来るので、興味ある人は色々と調べてやって見ましょう。

  • 複数のピンを建てたい
  • 吹き出しを表示させたい
  • ピンをクリックしたら吹き出しを表示させたい

webkikaku.co.jp



【Google Maps API】を使ったリッチな地図設置|株式会社クインテット



www.tam-tam.co.jp


mapstyle.withgoogle.com