Gravity Wiz Gravity Wiz

gpaa_marker_set (JS)

  1. Description
  2. Usage
  3. Parameters
  4. Since
  5. Examples
    1. Add an Info Window to the Marker

Description

Action fired after a marker has been placed on a map field. It allows you to programmatically make updates to the marker and map when a marker is placed.

Usage

Filter the child entries used for all Nested Forms’ calculation merge tag modifiers.

window.gform.addAction( 'gpaa_marker_set', function( params ) {
   const { formId, fieldId, addressFieldId, map, marker } = params;
});

Parameters

  • params.formId int

    ID of the form the map field is in.

  • params.fieldId int

    ID of the map field the marker was added to.

  • params.addressFieldId int

    ID of the address field the map field is attached to.

  • params.map object

    The Google API map object that the marker was added to.

  • params.marker object

    The Google API marker object that was added to the map.

Since

This filter is available since Gravity Forms Address Autocomplete 1.2.3.

Examples

Add an Info Window to the Marker

Adding an Info Window to the marker, but only after an address has been autocompleted:

// track wether or not the connected address field has been autofilled yet
window.gform.addAction( 'gpaa_fields_filled', ( place, instance, formId, fieldId ) => {
	if ( !window.gpaaShouldPlaceInfoWindow) {
		window.gpaaShouldPlaceInfoWindow = {};
	}

	var coordsKey = `${formId}.${fieldId}`;

	window.gpaaShouldPlaceInfoWindow[coordsKey] = true;
});

// if the connected address field has been autofilled, place an info window
window.gform.addAction( 'gpaa_marker_set', ( { formId, fieldId, addressFieldId, map, marker } ) => {
    var coordsKey = `${formId}.${addressFieldId}`;
	if (!window.gpaaShouldPlaceInfoWindow) {
		return;
	}

	if (!window.gpaaShouldPlaceInfoWindow[coordsKey]) {
		return;
	}

	var infoWindow = new google.maps.InfoWindow({
    	content: '<div><strong>Delivery Location</strong><br><p>Your package will be delivered here on 29, August 2022.</p></div>',
  	});

	infoWindow.open({
		anchor: marker,
		map: map,
	});
});

All Perks