PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

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

  1. 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 10 years ago on Tuesday September 6, 2011 | Permalink
  2. sammet
    Member

    Anyone has some idea??

    Posted 10 years ago on Monday September 19, 2011 | Permalink
  3. 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 10 years ago on Monday September 19, 2011 | Permalink
  4. I am looking at implementing the same functionality. Have you found a solution Sammet?

    Posted 10 years ago on Monday January 9, 2012 | Permalink
  5. Nick
    Member

    I'd be interested if anyone found a solution.

    Posted 9 years ago on Saturday July 7, 2012 | Permalink
  6. 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 9 years ago on Friday August 24, 2012 | Permalink