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>

"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