ロケーションの削除リクエスト フォーム

状況によっては、ビジネス オーナーや施設所有者から、該当する場所をゲームから削除するよう要求されることがあります。そうした場合に備え、ウェブサイトにリクエスト フォームを作成することをおすすめします。

フォームのサンプル

次の画像は、ロケーション削除リクエスト フォームのサンプルです。

削除リクエスト フォームのサンプル

サンプル HTML コード

次のサンプル HTML コードを使うと、リクエスト フォームのユーザーインターフェースをレンダリングできます。

<header>Report or Remove a Location from the Game</header>
<div id="form" class="form">
  <form action="submit.html" method="post">
    <label for="email">Tell us your email address so we can contact you if necessary.</label>
    <br/>
    <br/>
    <input type="text" id="email" class="input_email"/>
    <br/>
    <br/>
    <label for="issue">Select the issue you want to report.</label>
    <br/>
    <br/>
    <select id="issue" class="input_issue">
      <option id="remove_location" value="remove_location">Remove a location from the game</option>
      <option id="unsafe_location" value="unsafe_location">Report an unsafe location</option>
      <option id="other" value="other">A different issue</option>
    </select>
    <br/>
    <br/>
    <label for="description">Describe the issue in as much detail as possible.</label>
    <br/>
    <br/>
    <textarea id="description" rows="10" cols="20"></textarea>
    <br/>
    <br/>
    <label for="place_name">What is the place called?</label>
    <br/>
    <br/>
    <input type="text" id="place_name"/>
    <br/>
    <br/>
    <label for="location_map">If you have the Google Maps link, please paste it here</label>
    <br/>
    <br/>
    <input type="text" id="google_maps_url"/>
    <br/>
    <br/>
    <label for="latitude_longitude">If you know the coordinates (latitude and longitude) of the location, paste them here, separated by a comma. E.g., 51.456789, -0.123456</label>
    <br/>
    <br/>
    <input type="text" id="latitude_longitude"/>
    <br/>
    <br/>
    <label for="place_id">Google Place ID</label><br><br/><span>Leave blank. If you use the map to select a place, its ID will appear here.</span>
    <br/>
    <br/>
    <input type="text" id="place_id"></input>
    <br/>
    <br/>
    <div id=place_id_picker>
      <div id="autocomplete_container">
      <label for="pac-input">Start typing the name or address of the place, and we'll show you a list of suggestions.</label>
      <br/>
      <br/>
      <input id="pac-input" class="controls" type="text" placeholder="Enter a location">
      </div>
      <br/>
      <div id="map_canvas"></div>
    </div>
    <br/>
    <br/>
    <input type="submit"/>
  </form>
</div>

JavaScript サンプルコード

次の JavaScript サンプルコードでは、Places Autocomplete ウィジェットを使用して、ユーザーが場所を検索して選択できるようにしています。次に、ユーザーが選択した場所について、場所 ID などを含む情報ウィンドウを表示します。

<script>
  function initMap() {
    // This creates a map in the <div> with the id "map_canvas".
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
      center: {lat: -33.8688, lng: 151.2195},
      zoom: 13
    });

    var input = document.getElementById('pac-input');
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);

    var marker = new google.maps.Marker({
      map: map
    });

    autocomplete.addListener('place_changed', function() {
      var place = autocomplete.getPlace();
      if (!place.geometry) {
        return;
      }

      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);
      }

      // Set the position of the marker using the place ID and location.
      marker.setPlace({
        placeId: place.place_id,
        location: place.geometry.location
      });
      marker.setVisible(true);

      var formInput = document.getElementById('place_id');
      formInput.value = place.place_id;

      var formLatLng = document.getElementById('latitude_longitude');
      formLatLng.value = place.geometry.location;

      var formName = document.getElementById('place_name');
      formName.value = place.name;
    });
  }
</script>

次の JavaScript コードは、Maps JavaScript API を呼び出して API キーを渡し、Places ライブラリへの依存関係を指定します。さらに、initMap() 関数（上記）をコールバックとして指定します。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>