Location Removal Request Form

If you occasionally receive requests from business/property owners asking that their location be removed from your game, then you might consider implementing a request form for this on your website.

Sample form

The following image provides an example of what a location removal request form might look like.

Example removal request form

Sample HTML code

The following sample HTML code renders the request form's user interface.

<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>

Sample JavaScript code

The following sample JavaScript code uses the Places Autocomplete widget to allow the user to search for and select a place. The code then displays an info window that contains the place ID and other information about the place that the user selected.

<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>

The following JavaScript code calls the Maps JavaScript API, passes it your API key, specifies a dependency on the Places library, and then specifies the initMap() function (above) as the callback.

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