GoogleMapのマーカーを変える、色を変更する

【前提】

GoogleMapのマーカーを変える、色を変更するには
GoogleMapAPIを使ってjsにてマップ作成する必要があるため
お客様から”GoogleMap用のAPIキー”というものを取得していただく必要がある。

【さっくりしたやり方】

以下をテンプレとして使う。

◇body閉じタグ直前に以下タグを追加

※【APIキー】は差し替えること

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap">
</script>

◇main.jsファイル最下部に以下を追記

※アイコンサイズのレスポンシブに対応。
サイズ毎の画像は別途用意する。PCと同じであれば、PCと同じ画像名を指定する。
緯度・経度は案件毎に変更すること ※色変更等はstylesの項のコメントアウトを外し適宜変更すること

// Gmap
(function() {
  var map;
  var marker;
  var documentWidth = $(document).width();
  var viewMode = (documentWidth >= 768) ? 'pc' : 'sp';
  var options = {
    image: './assets/img/map_icon.png', // pcサイズ用アイコン
    image_sp: './assets/img/map_icon_sp.png', // spサイズ用アイコン
    lat: xx.xxxxxx, // 緯度
    lng: xx.xxxxxx, // 経度
    zoom: 18 // ズーム
  };

  // Resize Event
  var resizetimer = false;
  window.addEventListener('resize', function() {
    if (resizetimer !== false) {
      clearTimeout(resizetimer);
    }
    resizetimer = setTimeout(function() {
      documentWidth = $(document).width();
      if (documentWidth < 768) {
        if (viewMode == 'pc') {
          // PC -> SP
          viewMode = 'sp';
          marker.setIcon(options.image_sp);
        }
      } else {
        if (viewMode == 'sp') {
          // SP -> PC
          viewMode = 'pc';
          marker.setIcon(options.image);
        }
      }
    }, 200);
  });

  window.initMap = function() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: options.lat,
        lng: options.lng
      },
      zoom: options.zoom,
      // 以下はマップスタイルの変更等あれば追記する
      // styles: [{
      //   featureType: 'all',
      //   stylers: [{
      //     saturation: -100
      //   }]
      // }]
    });
    marker = new google.maps.Marker({
      position: {
        lat: options.lat,
        lng: options.lng
      },
      map: map,
      icon: (viewMode == 'pc') ? options.image : options.image_sp
    });

  }
})();