Most of us have used Google Maps, and some of us use it on a daily basis. Using google maps has never been easier. It is a web mapping service application and technology provided by Google, that powers many map-based maps embedded on third-party websites via the Google Maps API.

Adding a Google Map to a Module in Sugar

This can be done to any module in SugarCRM, whether it is a custom or any other module, that has an address field on it.

Follow the steps below to find out how to add a Google Map to your contacts module for primary address. This customization requires no code level modifications and can be done completely through the Sugar Studio in about 10 minutes.

The Basics

You will need to have access as an administrator to access the Sugar Studio, where we are going to create the integration. We will be creating a new field type called an iFrame. The “iframe” is an area of a webpage that displays information from another website. In this case we will be using the information in the primary address field to generate a query to google maps which will display on detail view. The field won’t be added to edit view since, it’s value is generated automatically, so there’s nothing for the end user to edit.

The Steps
Go to admin > studio > contacts > fields > create new field … and use the following settings:

• Data type = iFrame
• Field name = ContactMap
• Display Label = Location
• System Label = LBL_CONTACTMAP
• Help and Comment text can be left blank
• Check the “Generate URL” box
• Default Value = http://maps.google.com?q={primary_ad…}&output=embed
• Max Size = 255 <- This may need to be changed first to allow the default value to be entered
• IFrame Height = 400 <- This dictates how tall, in pixels, you want the map to be – adjust to taste
• Required Field = Unchecked
• Audit = Unchecked
• Importable = No
• Duplicate Merge = Disabled

Save the Field Add a new panel to contacts > detail view and drag “Location” to it. Save and Deploy (you may need run admin > repair > quick repair to clear the cache) Enjoy

The Default Value Details

For those of you who are interested in what that URL is doing here’s the breakdown: http://maps.google.com?q= This must be the beginning of the query, tells the frame to display google maps and tells google we’re about the send it a query.

{primary_address_street},{primary_address_city},{primary_address_state},{primary_address_postalcode},{primary_address_country}

Using the “insert field” button in studio I added the street, city, state, zip and country separated by commas. Luckily for us, google will fix the spaces when you execute the query and put it in proper form for submission.

Should you want something similar for alternate address, simply leverage the button to generate the necessary variables and insert accordingly &output=embed I choose to add one additional parameter to the query to tell google to give me just the map. We have asked it to deliver the results in embedded format so we don’t display the whole search bar in the query.

For more information about Google Maps and list of additional parameters for you to experiment with click here.