Integrate Google Maps and Appian on 7.10

Hi,

Once you get the API Key, you can use the following code to display a particular location on google map in a SAIL Interface based on the provided latitude and longitude by the user. This will only work for static maps.
a!formLayout(
label: "",
instructions: "Enter Latitude and Longitude to locate on map",
contents: {
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!floatingPointField(
label: "Latitude",
value: ri!latitude,
saveInto: ri!latitude
),
a!floatingPointField(
label: "Longitude",
value: ri!longitude,
saveInto: ri!longitude
),
a!imageField_17r3(
images: {
a!webImage(
source: concat(
"https://maps.googleapis.com/maps/api/staticmap?center=" & ri!latitude & "," & ri!longitude & "&zoom=11&size=8000x8000&markers=color:red%7Clabel:%7C" & ri!latitude & "," & ri!longitude & "&key=Your API Key"
)
)
}
)
}
)
}
)
}
)

Hi,

Once you get the API Key, you can use the following code to display a particular location on google map in a SAIL Interface based on the provided latitude and longitude by the user. This will only work for static maps.
a!formLayout(
label: "",
instructions: "Enter Latitude and Longitude to locate on map",
contents: {
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!floatingPointField(
label: "Latitude",
value: ri!latitude,
saveInto: ri!latitude
),
a!floatingPointField(
label: "Longitude",
value: ri!longitude,
saveInto: ri!longitude
),
a!imageField_17r3(
images: {
a!webImage(
source: concat(
"https://maps.googleapis.com/maps/api/staticmap?center=" & ri!latitude & "," & ri!longitude & "&zoom=11&size=8000x8000&markers=color:red%7Clabel:%7C" & ri!latitude & "," & ri!longitude & "&key=Your API Key"
)
)
}
)
}
)
}
)
}
)

You cannot directly embed dynamic maps in SAIL Interface. Although in 18.1, there is a function called webContentField() to embed content from external source, it does not work for maps. The only thing you could do to make your map more dynamic is you can add a path between two locations provided by user in your static map and can also change the zoom feature of your static map according to user input. Further, you can add a safe link to google maps from your interface. 

Hi Aditya,

I have tried to embed google map in SAIL form using webContenFfield() and it is also working for maps.

just for illustration,PFB the code below:

a!formLayout(

label: "Display Google Map",

instructions: "Enter Latitude and Longitude to locate on map",

contents: {

a!columnsLayout(

columns: {

a!columnLayout(

contents: {

a!floatingPointField(

label: "Latitude",

value: ri!latitude,

saveInto: ri!latitude,

readOnly: true()

),

a!floatingPointField(

label: "Longitude",

value: ri!longitude,

saveInto: ri!longitude,

readOnly: true()

),

a!webContentField(

 label:"Map",

   source:"www.google.com/.../place

 height :"MEDIUM"

)

}

)

}

)

})

thanks . much appreciated . it worked