How to Integrate Google maps in an Interface?

Question

Hi, 
 I need to integrate google maps in an interface, I have tried with the a!webContentField() component, but it does not support google maps. 
 So how do I approach for this?

pratikshap · Accepted Answer

Hi shwetad, 
 
Try this code in expression rule: 
 
load( 
 a!imageField( 
 label: ri!label, 
 images: { 
 a!webImage( 
 source: " maps.googleapis.com/.../staticmap & substitute( 
 ri!address, 
 " ", 
 "+" 
 ) & ",&zoom=11&markers=color:green|label:A|" & substitute( 
 ri!address," ","+" 
 ) & "&size=500x300" 
) 
 }, 
 size: "GALLERY", 
 labelPosition: "ADJACENT" 
 ) 
) 
 
Here ri!address contains the address to be display and ri!label is image field label.

deviratnamv · Answer

Hi Shwetad, 
 
Below code is usful to you 
 
load( 
 local!location{"which location you want"}, 
a!webContentField( 
 label: "map", 
 source: " www.google.com/.../place Key&q=local!data" 
) 
) 
Here key refers to enable the google maps in google map developer account then its automatically generates the API key. 
q refers to location i.e., the location should copy in google map site.

santoshd378 · Answer

Hi Shweta, 
 Use the below code for showing the maps in an interface using a!WebContentField(). 
 a!webContentField(
 label: "Webcontent",
 source:"https://www.google.com/maps/embed/v1/place?q=Your Place&zoom=17&key=Your API Key",
 showBorder: false,
 height: "SHORT"
 )

How to Integrate Google maps in an Interface?

Top Replies