Easily add a google map location picker to your form

gistfile1.js

<!--

Use this snippet to add a google map location chooser to your form

Step 1: Get a google map api key and insert it in the first javascript tag
Step 2: In your html form, create two hidden elements, one for latitude, and one for longitude. Give the elements ids and set the LATITUDE_ELEMENT_ID and LONGITUDE_ELEMENT_ID to the appropriate variables
Done!

-->

<div id="google_map" style="width:800px;height:400px;"></div>

<script type="text/javascript" src="http://www.google.com/jsapi?key=<%=google_map_api_key%>"></script>
<script type="text/javascript">

  var LATITUDE_ELEMENT_ID = "course_latitude";
  var LONGITUDE_ELEMENT_ID = "course_longitude";
  var MAP_DIV_ELEMENT_ID = "google_map";

  var DEFAULT_ZOOM_WHEN_NO_COORDINATE_EXISTS = 1;
  var DEFAULT_CENTER_LATITUDE = 22;
  var DEFAULT_CENTER_LONGITUDE = 13;
  var DEFAULT_ZOOM_WHEN_COORDINATE_EXISTS = 15;

  // This is the zoom level required to position the marker
  var REQUIRED_ZOOM = 15;

  google.load("maps", "2.x");

  // The google map variable
  var map = null;

  // The marker variable, when it is null no marker has been added
  var marker = null;

  function initializeGoogleMap() {
    map = new google.maps.Map2(document.getElementById(MAP_DIV_ELEMENT_ID));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());

    map.setMapType(G_NORMAL_MAP);

    var latitude = +document.getElementById(LATITUDE_ELEMENT_ID).value;
    var longitude = +document.getElementById(LONGITUDE_ELEMENT_ID).value;

    if(latitude != 0 && longitude != 0) {
      //We have some sort of starting position, set map center and marker
      map.setCenter(new google.maps.LatLng(latitude, longitude), DEFAULT_ZOOM_WHEN_COORDINATE_EXISTS);
      var point = new GLatLng(latitude, longitude);
      marker = new GMarker(point, {draggable:false});
      map.addOverlay(marker);
    } else {
      // Just set the default center, do not add a marker
      map.setCenter(new google.maps.LatLng(DEFAULT_CENTER_LATITUDE, DEFAULT_CENTER_LONGITUDE), DEFAULT_ZOOM_WHEN_NO_COORDINATE_EXISTS);
    }

    GEvent.addListener(map, "click", googleMapClickHandler);
  }


  function googleMapClickHandler(overlay, latlng, overlaylatlng) {

    if(map.getZoom() < REQUIRED_ZOOM) {
      alert("You need to zoom in more to set the location accurately." );
      return;
    }
    if(marker == null) {
      marker = new GMarker(latlng, {draggable:false});
      map.addOverlay(marker);
    }
    else {
      marker.setLatLng(latlng);
    }

    document.getElementById(LATITUDE_ELEMENT_ID).value = latlng.lat();
    document.getElementById(LONGITUDE_ELEMENT_ID).value = latlng.lng();

  }

  google.setOnLoadCallback(initializeGoogleMap);



</script>

Hi Mr
please can you help us to solve this problem please
we are a group of Algerian students, who want to build a web site to group (plans and topics of graduations) of each student, because our university does not accept and does not keep electronic Documents type pdf, docx .. etc. because it does not have a storage server, so we decided to do this with our way,
Here we try to integrate inside google form (Google maps for latitude and longitude of documents, and also have some kind of attachment files button) so we can display them with the help of table awsome service and also have a kind of personal database
tools are
google form for gethering information ,
google maps for locate documentation wit Lat/Long,
google spreadshhet to get sort of data base,
google drive to stock all documents
Awesome table to share and display
so anyone can help us to do this please thank you

For a good and updated alternative that works with google maps v3, you can try:

https://github.com/cyphercodes/location-picker/

thank you for the answer!
i will try

Perfect! Easy =) thanks

not working for me, error is This page didn’t load Google Maps correctly.

"Loading Maps API with the jsapi loader is deprecated"

this doesn't work anymore as of July 27th 2022
consider checking official documentation
https://developers.google.com/maps/documentation/javascript/adding-a-google-map