Adding a Google Map to a SugarCRM module

sugarcrmdevelopers —  February 24, 2012

So you’ve worked with SugarCRM for a while and wondered how you can integrate your Accounts module, or in fact any module with Google Maps…maybe you want to show how to load a map based on the address information you’ve got about a contact or an account?

Well, this can be done to any module, be it a custom one or not, as long as you have address fields to build the lookup. We’re using the Contacts module in this case, and it requires minimal effort – you use Sugar’s Studio to perform all of the modifications.

Getting Started

First things first, log in as an Admin and browse to the Studio facility. You’ll be using the field type IFrame which effectively loads a web page inside another. You can use any address information for this, but we’re using the primary address information in this example.

Next Steps

– Click on Contacts
– Click on Fields
– Choose Create New Field, and use the following settings:

Data type = IFrame
Field name = map_c
Display Label = Map
System Label = LBL_MAP (This is automatically generated by Sugar)

Leave the Help and Comment blank as we aren’t using them in this example.

Tick the Generate URL checkbox
Default Value ={primary_address_street},{primary_address_city},{primary_address_state},{primary_address_postalcode},{primary_address_country}&output=embed

So to break this down exactly what we’re doing here:

This tells Google we’re going to send it the q parameter, a query, with the following parameters:


We used the ‘Insert Field’ button in Studio to add street, city, state, postal code and country separated by commas. Google corrects any errors with spacing that you may introduce.


This parameter removes the search as you want to just embed it.

Max Size = 255
IFrame Height = 300

This specifies the heigh of the map in pixels.

Required Field = Do not tick
Audit = Do not tick
Importable = No
Duplicate Merge = Disabled

Click Save, to save the field’s settings.

Next Steps

– Click Layouts
– Click DetailView

In the middle of the screen you’ll see a number of fields already labelled on an existing layout.

Add a new panel by dragging the lozenge ‘New Panel’ to the place you’d like your new panel to be. Next, scroll to where our new field is called ‘map’ and drag this onto the new panel. You’ll see that the layout automatically adjusts itself to accommodate the new item

– Click Save & Deploy

It’s always good practice to clear the cache after performing Studio modifications so..:

– Click Admin
– Click Repair
– Click Quick Repair

And here’s our final result:

Hopefully this enables you to do all kinds of interesting Google Maps integrations with Sugar….