Static Google API in custom HTML field not saved in to repository.

replied on November 8, 2022

You are correct that fields created in custom HTML elements do not save their values.

Out of curiosity, why do you have it putting the value into a custom field instead of the built-in fields? Using the built-in fields would store the value with the submitted form.

As far as getting it to include the map with the archival to the repository, it just depends on your code. If the code has been set-up to create the map based on the stored field value at the time the form is loaded, it should be possible to get it working even with the archival/read-only version, just requires a little tweaking to make it work, since the read-only versions of the fields are a little different than the in-progress versions.

If you want to share the code you are using (redact any API keys or other sensitive info), there are a lot of talented people here who can provide advice to get it working the way you need.

0 0

replied on November 8, 2022

Hey Matthew thanks for the insight!

As for putting the values in the custom field I meant only the image of the static map, the rest is in the built in fields that work as they should.

Getting the map to show in the repository has been the biggest challenge so far and I'm out of ideas.. I'll attach the code that I am using hopefully someone see's something I am missing/did wrong.

$(document).ready(function (){
  
      if(navigator.geolocation){
                 navigator.geolocation.getCurrentPosition(showPosition);
      }
      else{
              alert("Geolocation is not supported by this browser.");
      }
        
	
      function showPosition(pos){

  	          var lat = pos.coords.latitude;
  	          var long = pos.coords.longitude;
              document.getElementById('mapID').innerHTML = "<img src='https://maps.googleapis.com/maps/api/staticmap?&amp;markers=color:red%7Clabel:Laptop%7C" + lat + "," + long + "&amp;center=" + lat + "," + long + "&amp;zoom=13&amp;size=1000x500&amp;key=API_KEY'>";

	  }
});

0 0

replied on November 9, 2022

Okay, I couldn't test this fully myself because I was having a difficult time getting Google set-up for the API and getting billing and key working - and I had to stop spending time on this. Therefore, I haven't tested this solution fully - but I have tested that it does appear to be properly storing and retrieving the values as expected, so I think it will work.

In the code you posted, lines 13 and 14 are retrieving the latitude and longitude from the device/browser and storing them into two variables. Then on line 15, those two variables are used with the API call and saving the map as an image. We need to insert some code in-between (after line 14 and before line 15) that determines if we already have latitude and longitude values stored on the form, and if there are, we want to use those instead, and if not, we want to take what we retrieved and store them for future use.

To do this, you'll need two fields on your form (they can be hidden, but should not be read-only) with class names of latitude and longitude.

Here's the code - hopefully with the comments you can see what this is doing with the two fields and the two variables:

    //If form is active, and values are already saved for Latitude, use those values to create the map.
    if ($('.latitude input').val() !== undefined && $('.latitude input').val() != '') {
      lat = $('.latitude input').val();
    }
    //If the form is in readonly/archival mode, use the stored values to create the map.
    else if ($('.latitude input').val() === undefined) {
      lat = $('.latitude .cf-field .ro').text();
    }
    //Otherwise save the values from the current location into the field for use next time.
    else {
      $('.latitude input').val(lat);
    }
    
    //If form is active, and values are already saved for Longitude, use those values to create the map.
    if ($('.longitude input').val() !== undefined && $('.longitude input').val() != '') {
      long = $('.longitude input').val();
    }
    //If the form is in readonly/archival mode, use the stored values to create the map.
    else if ($('.longitude input').val() === undefined) {
      long = $('.longitude .cf-field .ro').text();
    }
    //Otherwise save the values from the current location into the field for use next time.
    else {
      $('.longitude input').val(long);
    }

0 0

Question

Question

Static Google API in custom HTML field not saved in to repository.

Replies

Sign in to reply to this post.