GoogleMAPのピンを任意の画像に変える方法

こんなのが作れます。

手順は次の通り。

1. htmlファイルを作る
2. CSSファイルを作る
3. Maps JavaScript APIを取得する
4. javascriptコードを書く
5. 動作確認

htmlコードの例

マップを表示したい箇所に下記のコードを設置します。

<div id="gmap"></div>

CSSの例

マップの幅と高さを設定しないと（0pxのままだと）マップを目視確認できないので、下記のようにwidthとheightをスタイルシートで設定します。

<style type="text/css">
  #gmap {
    width: 100%;
    max-width: 600px;
    height: 360px;
  }
</style>

Maps JavaScript APIの取得方法

以下のサイトで詳しく説明されていたので参考にしてください。
僕も参考にさせて頂きました。

https://www.webdesignleaves.com/pr/plugins/googlemap_01.html

javascriptコードの例

次に下記のjavascriptコードを埋め込みます。

<script>
  function initMap() {
    var latlng = new google.maps.LatLng( 37.92231816979515, 140.11662386938718 );
    var map = new google.maps.Map(document.getElementById('gmap'), {
      zoom: 16,
      center: latlng
    });
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      icon: '/gmap/cpin.png', //任意のピンの画像
    });
  }
</script> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=ここに前手順で取得したAPIキーを入れる=initMap"></script>

動作の確認方法

作成したhtmlファイルやピンの画像ファイルをサーバーにアップロードします。

その後アップロードしたWEBサイトにブラウザでアクセスすると、問題がなければ以下のようにGoogleマップが表示されます。

以上、Googleマップでピンを任意の画像に変える手順になります。