Google Maps API 〜地図にオーバーレイを追加する〜

イントロダクション

前回、Google Maps APIを使用して地図を作成する準備を行いました。なんとか画面に地図を表示することができましたがこれだけでは面白くありません。。。

Google Mapにピンを追加

今回の本題です。作成したGoogle Mapにピン(オーバーレイ)を追加します。オーバーレイは
よく見るアレです。下の方にあります。

これは、自分の作成中の地図ですが「地図をクリックするとピンが表示される」という仕組みにしました。
意図するところは以下のような処理を考えております。

  1. 画面を選択する
  2. ピンが表示される
  3. 下の「名前」と書いてあるところに文字を入力
  4. 登録ボタンで位置情報をDBに登録する

以上のような処理を考えています。
現状の処理としては以下のようなイメージです。

  • HTMLでMapを作成する(JSの実装あり)
  • JSで細かい処理を行う

コード

参考にしたサイトは以下になります。

// 表示した地図にイベントを登録する
map.addListener('click', function(evt) {
   // イベント発生時の処理
   function (evt, map) {
// 緯度を設定する  document.getElementById('latValue').textContent = evt.latLng.lat();
// 経度を設定する document.getElementById('lngValue').textContent = evt.latLng.lng();
// オーバーレイを表示
selectedMarker = new google.maps.Marker(selectedOverlayOpt(evt));
    selectedMarker.setMap(map);
});

/** 選択用のオーバーレイOption */
function selectedOverlayOpt(mapEvent) {
    return {
        position: mapEvent.latLng,
        animation: google.maps.Animation.DROP,
        icon: {
            url: "mapImg/selected.png",
            scaledSize: new google.maps.Size(40, 40)
        },
    };