Send coordinates of map in a form

Design help Custom code
1

Hi all, after embedding a google map in my form, how can i allow the user to place a marker and send the coordinates in an input? Is it possible?

Thank you!

2

This isn’t possible natively in Webflow. You’ll need custom Javascript and this solution seems viable:
https://stackoverflow.com/questions/44957410/use-google-maps-marker-coordinates-as-form-input

3

Thank you! I Actually tried this before posting, but couldn’t make it work since i’m not good in javascript, i get: “Uncaught ReferenceError: google is not defined”

4

So by adding the reference again before the script:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY></script>

i get rid of the error, however, i cant place any markers, i just see the map:
http://mapofmemorylebanon.webflow.io/en/participate
What am i missing?
Thank you!

5

I finally got it working, hopefully someone else finds it useful.

First add the map by custom code, i was trying to add javascript on the map added through the designer and it wasnt working.
Second, add a draggable marker and send the location on hidden input.

The code:

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxx&sensor=false"></script>

<script type="text/javascript">
   google.maps.event.addDomListener(window, 'load', init);
 
   function init() {
	 var mapOptions = {
              zoom: 10,
              scrollwheel: false,
              center: new google.maps.LatLng(33.874620, 35.825954)
     };

	 var mapElement = document.getElementById('map');
     var map = new google.maps.Map(mapElement, mapOptions);
     var myLatLng = new google.maps.LatLng(33.874620, 35.825954);

     var mapMarker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                draggable: true,  
                title:  'Drag to location'

     });
     
     google.maps.event.addListener(mapMarker, 'dragend', function(event){
       var latitude =  event.latLng.lat();
       var longitude = event.latLng.lng();
       $("#location").val(latitude+","+longitude);
     }); 
   }
</script>

In the form:

<input id="location" name="location" type="hidden" value="" />

And don’t forget to have a div id=“map” in the form too.

2 Likes
6

Hi all,

I just wanted to share my experience, shout out to @ActfortheDisappeared for providing the solution.

Here the main points:-

  • added another input field called address (visible).

  • called another api and function which is from lat and lng to formatted address and display it in the field. (Need to make it readonly)

  • replaced drag to click (you have to drag the marker which is annoying)

**Note: you can change the size and other properties by adding custom attribute. Replaced the custom div and used dive block and named it address **

Uploading: 61684DDD-2566-4330-80BE-C48956BDDC7E.jpeg…

7 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAbeaCk&sensor=false"></script>

<script type="text/javascript">
   google.maps.event.addDomListener(window, 'load', init);
 
   function init() {
	 var mapOptions = {
              zoom: 10,
              scrollwheel: true,
              center: new google.maps.LatLng(26.5589361,50.0776536)
     };

	 var mapElement = document.getElementById('map');
     var map = new google.maps.Map(mapElement, mapOptions);
     var myLatLng = new google.maps.LatLng(26.5589361,50.0776536);

     var mapMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'Click to change location'

     });
     
google.maps.event.addListener(map, 'click', function(event) {
        var latitude = event.latLng.lat();
        var longitude = event.latLng.lng();
        mapMarker.setPosition(new google.maps.LatLng(latitude, longitude));
        $("#location").val(latitude + "," + longitude);
        getFormattedAddress(latitude, longitude);
      });
    }
    
    function getFormattedAddress(lat, lng) {
      var geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(lat, lng);

      geocoder.geocode({'location': latlng}, function(results, status) {
        if (status === 'OK') {
          if (results[0]) {
            $('#address').val(results[0].formatted_address);
          } else {
            $('#address').val('No results found');
          }
        } else {
          $('#address').val('Geocoder failed due to: ' + status);
        }
      });
    }
</script>