Is it possible to integrate google maps api into a html form where a user can select a specific pin point location in the form of co-ordinates and submit them with your form?

I am using asp with Razor views, however I doubt that will effect the answer to this question in anyway.

I have had a look at and cant seem to find using the maps api as a form input. Unless maybe im' blind.

Is it possible to integrate google maps api into a html form where a user can select a specific pin point location in the form of co-ordinates and submit them with your form?

I am using asp with Razor views, however I doubt that will effect the answer to this question in anyway.

I have had a look at https://developers.google./maps/documentation/javascript/tutorial and cant seem to find using the maps api as a form input. Unless maybe im' blind.

• javascript
• jquery
• html
• google-maps
• forms
• http-post

2 Answers 2

Add a draggable marker and store the lat/lng values in hidden inputs on dragend (event docs).

// Place a draggable marker on the map
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

//get marker position and store in hidden input
google.maps.event.addListener(marker, 'dragend', function (evt) {
    document.getElementById("latInput").value = evt.latLng.lat().toFixed(3);
    document.getElementById("lngInput").value = evt.latLng.lng().toFixed(3);
});

You can create an eventlistener initializing the marker first.

   marker = new google.maps.Marker({
      map: map,
      draggable: true,
      animation: google.maps.Animation.DROP,
      //position: new google.maps.LatLng(yourLat, yourLng),

  });

   google.maps.event.addListener(marker, 'dragend', function (event) {
        $("#yourinputlat").val(this.getPosition().lat().toFixed(6));
        $("#yourinputlng").val(this.getPosition().lng().toFixed(6));
    });

I've been using this to get the location with latitude and longitude from a google map and then insert it in an input to be sent with the POST