Display Google Maps on The Formyoula Form

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

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

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();
}

// 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();
  }
}