How to create a field for entering a location with Gravity Forms and Google Map?

Gravity Support Forums » Plugin Support » Gravity Forms

sammet
Member

Hi All!
After researching this forum I am a bit confused when it comes to Gravity Forms and Google Maps....

What I want is to create a form with a field so that the user can create a marker on a Google map. For example - to create a marker for his/her favourite city in the world. If possible it would be great if he/she could add multiple markers...

How can this be done with GF?

There are so many questions about this (and it seems there is a field on the way from the developers or???). But I have not found any answer that I cleary understand how to implement this. ;-) Where should I start?

Can I use metaboxes to make this work?
And if so - what is the step-by-step doing this?

Any other ways, or plugins that makes it easy to insert a user generated Google map function into a Gravity Form?

Thanks a million for help!
Sammet

Posted 13 years ago on Tuesday September 6, 2011 | Permalink
sammet
Member

Anyone has some idea??

Posted 13 years ago on Monday September 19, 2011 | Permalink
Carl Hancock
Administrator

Gravity Forms doesn't use meta boxes. It's not a WordPress post or page and isn't built in the post editor. There isn't currently a Google Maps Field for Gravity Forms. So there isn't a built in feature to do this. It would be possible to do what you want to do but it would have to be done as a customization by creating a custom form field and adding it to the form editor. It's possible, but a more advanced customization and someone would need to be familiar with Gravity Forms hook/filter usage in order to implement it.

Posted 13 years ago on Monday September 19, 2011 | Permalink
Jeroen1973
Member

I am looking at implementing the same functionality. Have you found a solution Sammet?

Posted 13 years ago on Monday January 9, 2012 | Permalink
Nick
Member

I'd be interested if anyone found a solution.

Posted 12 years ago on Saturday July 7, 2012 | Permalink

I am also interested in doing this. Have got as far as adding the map using a custom html field, dropping a marker based on postcode entered in a postcode field and allowing the marker to be dragged. I'm stuck on saving the latlng values of the dropped marker into a hidden field.

What I would do next is setup a form notification with google maps code embedded and use the placeholder for my latlng hidden field value placeholder do load the selected location. Or possibly, if their are issues loading this put the latlag into a google maps link in the form notification so that the user can click on the link to view the submitted location on google maps.

Does anyone know how to take the submitted latlng and enter it as the value of the hidden field.

Heres the code for all interested

<script src="http://maps.googleapis.com/maps/api/js?&key=AIzaSyCNxoHu7f79iqUKTWw8T6zOWXX2FNvWioY&sensor=false"></script>

<script>
var geocoder;
var map;

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(54.80068486732233, -4.4384765625),
    mapTypeId: google.maps.MapTypeId.HYBRID,
	mapTypeControl: false
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  //GEOCODER
  geocoder = new google.maps.Geocoder();
}

function codeAddress() {
    var address = document.getElementById("input_1_9").value;
	var loc=[];

    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
		map.setZoom(20);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
			draggable: true,
        });
		loc[0]=results[0].geometry.location.lat();
        loc[1]=results[0].geometry.location.lng();
		//alert(loc);
		document.getElementById('field_1_36').value = loc;
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

window.onload = function () {
	initialize();
}
</script>

<script>

$('#input_1_9').blur(function()
	{
		if( $(this).val() ) {
		codeAddress();
	}
});

$('#pcaSelectTH88').change(function(){
	$('#field_1_25').css('display', 'block');
});

</script>

<div id="map_canvas" style="width: 600px; height: 400px; position: relative;"></div>

Cheers

Posted 12 years ago on Friday August 24, 2012 | Permalink