Set marker position with click

[Simon B]

Hi

I’d like to set the map marker position and address field by clicking on the map, rather than by dragging the marker.

I see someone else posted the same question a while back, but your answer no longer applies as the JavaScript file is now very different.

Are you able to advise what changes I need to make to assets/js/gf.js to achieve this now?

Thanks!
Simon

[Eyal Fitoussi]

Hello Simon,

Which version are you using? I can provide you with a solution for version 2 beta 18 which should be officially released very soon.

Let me know if that will work for you.

[Simon B]

Hi Eyal

Thanks for your quick reply! I’m using v1.5.

I’m happy to upgrade to a beta version if it works. The only thing for me is I have a very tight deadline – this site has to be live by Sunday at the latest.

I have used the Google Maps API before, just not recently, so if it’s easier/quicker for you to point me in the right direction I may be able to figure the details out myself.

Cheers
Simon

[Eyal Fitoussi]

Hi Simon,
Since version 2.0 is a completely new version and more complex it has been in beta for about 6 months. By now the latest beta version is stable and many users have been using it. So I believe that it will work well for you. However, because of the major update of the plugin you will need to edit your forms and recreate the geolocation features.

Here You can read more about the new version of the plugin and the documentation for the new version can be found here.

If you do install the new version I will then provide you with the script you need to accomplish the above.

[Simon B]

Thank you, I’ll install the latest beta now.

[Simon B]

Beta 18 installed and working 🙂

[Eyal Fitoussi]

Awesome.

Now try this:

1) Open the file gravityforms-geolocation/assets/js/gfgeo.min.js

2) go to line 938 which should be just below this piece of code:

// when dragging the marker on the map google.maps.event.addListener( GF_Geo.maps[map_data.map_id].marker, 'dragend', function( event ){ // set the global Geocoder ID GF_Geo.geocoder_id = map_data.geocoder_id; // geocode coords to get address fields GF_Geo.geocoder( 'map', [ event.latLng.lat(), event.latLng.lng() ], GF_Geo.map_geocoder_success, false ); });

1 2 3 4 5 6 7 8 9

// when dragging the marker on the map             google.maps.event.addListener( GF_Geo.maps[map_data.map_id].marker, 'dragend', function( event ){                                  // set the global Geocoder ID                 GF_Geo.geocoder_id = map_data.geocoder_id;                   // geocode coords to get address fields                 GF_Geo.geocoder( 'map', [ event.latLng.lat(), event.latLng.lng() ], GF_Geo.map_geocoder_success, false );               });

and add this script:

// hook custom functions if needed jQuery( document ).trigger( 'gfgeo_render_map', [ GF_Geo, map_data ] );

1 2 3 4 5

// hook custom functions if needed jQuery( document ).trigger(      'gfgeo_render_map',      [ GF_Geo, map_data ] );

This is like a hook that can be used for custom functions to be added to the script. You should do this only once since I will add it to the next release of the plugin.

3) To the functions.php file of your child theme add this script:

function gfgeo_move_map_marker_onclick() { ?> <script> jQuery( document ).on( 'gfgeo_render_map', function( event, GF_Geo, map_data ) { GF_Geo.map_single_click = false; google.maps.event.addListener( GF_Geo.maps[map_data.map_id].map, 'click', function( event) { GF_Geo.map_single_click = true; setTimeout( function() { if ( GF_Geo.map_single_click ) { GF_Geo.maps[map_data.map_id].marker.setPosition( event.latLng ); // save some map details GF_Geo.processing.status = true; GF_Geo.processing.element = 'map'; GF_Geo.processing.coords = { 'lat' : event.latLng.lat(), 'lng' : event.latLng.lng() }; // geocode coords and get address fields GF_Geo.geocoder( [ event.latLng.lat(), event.latLng.lng() ], GF_Geo.map_geocoder_success, false ); } }, 200); }); google.maps.event.addListener( GF_Geo.maps[map_data.map_id].map, 'dblclick', function( event ) {// duh! :-( google map zoom on double click! GF_Geo.map_single_click = false; }); }); </script> <?php } add_action( 'wp_footer', 'gfgeo_move_map_marker_onclick' );

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

function gfgeo_move_map_marker_onclick() { ?> <script> jQuery( document ).on( 'gfgeo_render_map', function( event, GF_Geo, map_data ) {   GF_Geo.map_single_click = false;   google.maps.event.addListener( GF_Geo.maps[map_data.map_id].map, 'click', function( event) {          GF_Geo.map_single_click = true;          setTimeout( function() {           if ( GF_Geo.map_single_click ) {                          GF_Geo.maps[map_data.map_id].marker.setPosition( event.latLng );                      // save some map details             GF_Geo.processing.status  = true;             GF_Geo.processing.element = 'map';             GF_Geo.processing.coords  = {                 'lat' : event.latLng.lat(),                 'lng' : event.latLng.lng()             };                      // geocode coords and get address fields             GF_Geo.geocoder( [ event.latLng.lat(), event.latLng.lng() ], GF_Geo.map_geocoder_success, false );           }       }, 200); });   google.maps.event.addListener( GF_Geo.maps[map_data.map_id].map, 'dblclick', function( event ) {// duh! :-( google map zoom on double click!      GF_Geo.map_single_click = false; });   }); </script> <?php } add_action( 'wp_footer', 'gfgeo_move_map_marker_onclick' );

4) Save all files and test it.

Let me know if it works.

[Simon B]

Thank you – that’s working in that I can now click to set the marker position, but as soon as I click, the address field no longer updates with the address of the new position (either on further clicks or drags).

p.s. – Great to know that it uses a hook so I won’t lose this on future updates 🙂

[Eyal Fitoussi]

You are welcome.

I see why the address won’t update when changing position on click but it should update the address when you drag the marker. In the form editor, did you set the geocoder field of the address field to be the same as the map field?

To fix the address update on map click replace the script on the functions.php file with the below:

function gfgeo_move_map_marker_onclick() { ?> <script> jQuery( document ).on( 'gfgeo_render_map', function( event, GF_Geo, map_data ) { GF_Geo.map_single_click = false; google.maps.event.addListener( GF_Geo.maps[map_data.map_id].map, 'click', function( event) { GF_Geo.map_single_click = true; setTimeout( function() { if ( GF_Geo.map_single_click ) { GF_Geo.maps[map_data.map_id].marker.setPosition( event.latLng ); // set the global Geocoder ID GF_Geo.geocoder_id = map_data.geocoder_id; // geocode coords to get address fields GF_Geo.geocoder( 'map', [ event.latLng.lat(), event.latLng.lng() ], GF_Geo.map_geocoder_success, false ); } }, 200); }); google.maps.event.addListener( GF_Geo.maps[map_data.map_id].map, 'dblclick', function( event ) { GF_Geo.map_single_click = false; }); }); </script> <?php } add_action( 'wp_footer', 'gfgeo_move_map_marker_onclick' );

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

function gfgeo_move_map_marker_onclick() { ?> <script> jQuery( document ).on( 'gfgeo_render_map', function( event, GF_Geo, map_data ) {   GF_Geo.map_single_click = false;   google.maps.event.addListener( GF_Geo.maps[map_data.map_id].map, 'click', function( event) {          GF_Geo.map_single_click = true;          setTimeout( function() {           if ( GF_Geo.map_single_click ) {                          GF_Geo.maps[map_data.map_id].marker.setPosition( event.latLng );                               // set the global Geocoder ID                  GF_Geo.geocoder_id = map_data.geocoder_id;                    // geocode coords to get address fields                  GF_Geo.geocoder( 'map', [ event.latLng.lat(), event.latLng.lng() ], GF_Geo.map_geocoder_success, false );         }       }, 200); });   google.maps.event.addListener( GF_Geo.maps[map_data.map_id].map, 'dblclick', function( event ) {      GF_Geo.map_single_click = false; });   }); </script> <?php } add_action( 'wp_footer', 'gfgeo_move_map_marker_onclick' );

[Simon B]

Brilliant – all is now working perfectly thank you.

Outstanding customer service 🙂

[Eyal Fitoussi]

You are welcome Simon. I am glad I could help and thank you for the kind feedback you posted on Twitter :).

[redhill]

Hi Eyal,

Just wondering if this would work with v 2.6.5 of Geo my WP?

I would like to add this same functionality.
Many thanks

[alexefem85]

distance calculation Forum

Check the distance between any cities in England on a map of the world.

This calculator will calculate the distance – http://distancecalculation.info/
between the cities on a map of the world will always help anyone
who wants to know the exact distance between the cities and countries of the world.

The calculation of the distance on the map of the world is possible!
In a straight line – as if you were flying in an airplane.
On the roads – always choose the most optimal route by road.
Walking – the calculation of distance is carried out on public roads with a speed of 5km / h.
Cycling – the distance calculation is carried out on public roads with a speed of 20km / h.

Our calculator can calculate a route only on free roads
then you do not have to pay for travel on the roads, as is well known in Europe
almost all toll roads, but there are free – this route will only
toll-free roads and you will save money

Our calculation distance calculator will give you additional information: approximate travel time, price and quantity of fuel
you potramite on this route, distance killometrah.

You can also create a complex route which will pass through only those cities that you need
You can add up to 10 intermediate cities and your route will be built through them.

Our distance calculator for calculating have additional fields where you will be able to
indicate how many liters of fuel your vehicle consumes on a 100km path, and specify the cost of fuel per 1 liter.

On the map of the world will show you a detailed route where it will be able to consider in detail, also
a geographical map of the route you will receive detailed instructions where you need to go by car and where you have to rotate the pointers to all traffic signs.

Attachments:

You must be logged in to view attached files.

[Landon]

Hi I also have this issue. I know you said an update is forthcoming, but it seems like it might be a little while? I also need to get my installation running soon. Is this code still good for getting this functionality in the meantime?

[Landon]

I am in the wrong forum. This is working in Gravity but not Formidable.

[Author]

Posts