Display Google Maps on The Formyoula Form

In this guide, we will explain how to display Google Maps on the form to search for nearby Places.

Drag and drop three Hidden fields, an HTML field and two JavaScript fields.

Rename the hidden fields into Latitude, Longitude and API Key as shown below.

Click the pencil icon of the Hidden field named API key and set your API key as the value.

Follow given below link for the API key.

https://developers.google.com/maps/documentation/javascript/get-api-key

Click the pencil icon of the HTML field and paste the code.

Please use the below HTML code:

<div id="map"><div class="whirl traditional"></div></div>
<style>
#map{

height:500px;
margin: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Click the pencil icon of the first JavaScript field and paste the code.

Please use the below JavaScript code:

function get_geo_details() {
  //Record Location
  navigator.geolocation.getCurrentPosition(
    function( position ) {
      //Set values
      window.formyoula.form_fields[ '2476-8751-3271' ] && window.formyoula.form_fields[ '2476-8751-3271' ].set( 'value', position.coords.latitude );
      window.formyoula.form_fields[ '72ab-156d-3a36' ] && window.formyoula.form_fields[ '72ab-156d-3a36' ].set( 'value', position.coords.longitude );
    },
    function( error ) {
      //Record error if needed
    }, {
      maximumAge: 0,
      timeout: 5000,
      enableHighAccuracy: true
    }
  );
}
// Check if navigator is avilable
if ( navigator.geolocation && navigator.geolocation.getCurrentPosition ) {
  // Record location if no other location is recorded already
  if ( !window.formyoula.form_fields[ 'Latitude' ].get( 'value' ) && !window.formyoula.form_fields[ 'Longitude' ].get( 'value' ) ) get_geo_details();
}

Note: Please change the Field Ids as per your form.

Click the pencil icon of the second JavaScript field and paste the code.

Please use the below JavaScript code:

// Check if editing existing entry i.e. location is already loaded
if ( window.formyoula.form_fields[ 'Latitude' ].get( 'value' ) && window.formyoula.form_fields[ 'Longitude' ].get( 'value' ) ) {
  // Load script and display map
  loadScript( 'https://maps.googleapis.com/maps/api/js?key=' + formyoula.form_fields[ 'API Key' ].get( 'value' ) + '&callback=initMap&libraries=geometry,places' );
}
// Listen to the changes on location fields
window.formyoula.form_fields[ 'Longitude' ].on( 'change', function() {
  // Check if both lat and long have values
  if ( window.formyoula.form_fields[ 'Latitude' ].get( 'value' ) && window.formyoula.form_fields[ 'Longitude' ].get( 'value' ) ) {
    // Load script and display map
    loadScript( 'https://maps.googleapis.com/maps/api/js?key=' + formyoula.form_fields[ 'API Key' ].get( 'value' ) + '&callback=initMap&libraries=geometry,places' );
  }
} );
// Listen to the changes on location fields
window.formyoula.form_fields[ 'Latitude' ].on( 'change', function() {
  // Check if both lat and long have values
  if ( window.formyoula.form_fields[ 'Latitude' ].get( 'value' ) && window.formyoula.form_fields[ 'Longitude' ].get( 'value' ) ) {
    // Load script and display map
    loadScript( 'https://maps.googleapis.com/maps/api/js?key=' + formyoula.form_fields[ 'API Key' ].get( 'value' ) + '&callback=initMap&libraries=geometry,places' );
  }
} );
// initialize variable
var map;
// init Map function to display map
function initMap() {
  var location_coordinates = {
    lat: window.formyoula.form_fields[ '2476-8751-3271' ].get( 'value' ),
    lng: window.formyoula.form_fields[ '72ab-156d-3a36' ].get( 'value' )
  };
  // new instance of google.maps.Map
  map = new google.maps.Map( document.getElementById( 'map' ), {
    // center the map to location coordinates captured
    center: location_coordinates,
    // Set zoom level
    zoom: 15
  } );
  // Create marker
  var marker = new google.maps.Marker( {
    // Set position of  the marker
    position: location_coordinates,
    // map
    map: map
  } );
  // Create request object for nearby places
  var request = {
    location: location_coordinates,
    radius: '1500',
    type: [ 'atm' ]
  };
  // Call the service class
  var service = new google.maps.places.PlacesService( map );
  service.nearbySearch( request, callback );
}
// Call back function to create marker based on results
function callback( results, status ) {
  if ( status == google.maps.places.PlacesServiceStatus.OK ) {
    for ( var i = 0; i < results.length; i++ ) {
      createMarker( results[ i ] );
    }
  }
}
// create marker based on place array in map
function createMarker( place ) {
  if ( !place.geometry || !place.geometry.location ) return;
  var marker = new google.maps.Marker( {
    map,
    position: place.geometry.location
  } );
}
// load script 
function loadScript( url ) {
  // Avoid loading script multiple times
  if ( !window.script_loaded ) {
    var script = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?key=' + formyoula.form_fields[ 'API Key' ].get( 'value' ) + '&callback=initMap&libraries=geometry,places';
    script.id = 'google_maps_api';
    script.async = false;
    window.script_loaded = true;
    script.addEventListener( 'load', function() {
      initMap();
    } );
    $( 'head' ).append( script );
  } else if ( window.script_loaded ) {
    initMap();
  }
}

Note: Please change the Field Ids.

Please try the form.

Example form JSON

Google Maps API [Example].json12.7KB

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂