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:

#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.