GoogleMapのカスタマイズ

投稿日：2018年2月18日

GoogleMapの埋め込みってよくある要件だと思うのですが、先日、GoogleMapに色(企業カラー)をつけたいという要望がありました。

てっきり埋め込み１行で解決すると思いましたが、色々と調べることに。

ちなみに静的なデータの地図をディフォルトのままでただMapを表示させたいだけでしたら、

普通にGoogleMapにアクセスして、「地図を埋め込む」を選択して貼り付ければいいと思います。

ただ、システムの場合、動的なデータからGoogleMapを呼び出して、なおかつ色などをカスタマイズさせたい場合、少々工夫が必要です。

step1 まずGoogleMapのAPIを取得する

step2 APIキーを元にしてgooglemapのAPIを読み込む

<script src="https://maps.googleapis.com/maps/api/js?key=取得したAPIキー"></script>

1	<script src="https://maps.googleapis.com/maps/api/js?key=取得したAPIキー"></script>

step3 地図をカスタマイズして貼り付ける。

  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': '東京都中央区1-1-1',
    'region': 'jp'
  },function (results, status) {
　  if (status == 'OK') {
      var map_location = new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng());
      var map_option = {
          zoom: 16,
          center: map_location,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          styles: [{stylers: [{hue: '#00a85f' }]}]
          };
      //ここに実際の地図のDOM要素が入ります。
      var map = new google.maps.Map(document.getElementById('google_map_block'), map_option);
      //ここをつけてあげると地図上に目印がたちます。
      var marker0 = new google.maps.Marker({position: map_location,map: map});
    }
  });

var geocoder = new google.maps.Geocoder();

geocoder.geocode({

'address': '東京都中央区1-1-1',

'region': 'jp'

},function (results, status) {

　 if (status == 'OK') {

var map_location = new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng());

var map_option = {

zoom: 16,

center: map_location,

mapTypeId: google.maps.MapTypeId.ROADMAP,

styles: [{stylers: [{hue: '#00a85f' }]}]

};

//ここに実際の地図のDOM要素が入ります。

var map = new google.maps.Map(document.getElementById('google_map_block'), map_option);

//ここをつけてあげると地図上に目印がたちます。

var marker0 = new google.maps.Marker({position: map_location,map: map});

}

});

ちなみにstylesの部分ですがここのパラメーターを変えてあげると地図の見た目が変化します。

どんなパラメーターを設定したらどんな風に地図が変わるかを知りたい場合は下記のリンクを。

http://jsdo.it/kyo_ago/n17c

参考リンク

APIを使ってGoogleマップの色を変えてみよう！

住所からGoogle Mapをサイトに表示する方法

【コピペで簡単】Google Mapをおしゃれにカスタマイズしよう