Adding a Google Map to a Sugar Module

by Sarah Friedlander Garcia on February 12, 2016

Sugar has the capability to generate web page images such as Google maps for users to view the location of their clients. Administrators in Sugar can add an IFrame field via Admin > Studio to generate the Google map based on the clients address on record. Google maps can be added to any module (Custom and Stock) that has an address type field in it.

Note: This article pertains to Sugar versions 6.x and 7.x.

Prerequisite

To embed a Google map on a third-party page such as SugarCRM, Google requires that an API key is created. For more information on creating and obtaining the API key, please refer to the Google Maps Embed API guide. Please note that you will need to log in with a Google account to create the API key. 

Use Case

In this example, we will use the contacts primary address field to get a visual image of their location via Google maps in the contacts record view.

Note: The Google map will be added to the Record View layout (for Sidecar modules) in Sugar 7.x. 

Steps to Complete

Create IFrame Field

First we will create a new field of type IFrame in the Contacts module and use the primary address fields to generate a query to Google maps.

  1. Navigate to Admin > Studio > Contacts > Fields and click "Add Field".
  2. Create a new IFrame field with the following values:
    • Data Type : IFrame
    • Field Name : contactsmap
    • Display Label : Location
    • System Label : LBL_CONTACTSMAP
  3. Mark the Generate URL checkbox.
  4. Enter the below URL into the Default Value field.
    • https://www.google.com/maps/embed/v1/place?key=API_KEY&q= 
      • Note: Replace "API_KEY" with the API key you obtained via Google per the Prerequisite section.
  5. Use the Generate URL drop-down menu to select the address fields to add to the Google map query.
    • Select "Primary_address_street" then click "Insert Field".
    • Select "Primary_address_city" then click "Insert Field".
    • Select "Primary_address_postalcode" then click "Insert Field".
    • Select "Primary_address_country" then click "Insert Field". 
  6. The URL in the Default Value field should now be displayed as follows:
    • https://www.google.com/maps/embed/v1/place?key=API_KEY&q={primary_address_street}{primary_address_city}{primary_address_postalcode}{primary_address_country}
  7. Modify the URL by adding a comma and space after each address field. The final URL should be as follows:
    • https://www.google.com/maps/embed/v1/place?key=API_KEY&q={primary_address_street}, {primary_address_city}, {primary_address_postalcode}, {primary_address_country}
  8. The "Max Size" and "IFrame Height" (height of the map in pixels) can be adjusted to suit your needs. For our example, we will use 255 (Max Size) and 400 (IFrame Height).
  9. Change "Importable" to "No".
  10. Click "Save" to create the new iFrame field. 

Default Value URL Breakdown

We will break down the different parts that make up the Google map URL that we used as an example for the default value field.

We first begin the query with https://www.google.com/maps/embed/v1/place?key=API_KEY&q= as this tells the frame to display Google maps using the API key obtained via Google. We used the Generate URL drop-down menu to select the primary address street, city, postal code, and country to be inserted into the query. The address fields were separated by commas and spaces to format it properly: 

https://www.google.com/maps/embed/v1/place?key=API_KEY&q={primary_address_street}, {primary_address_city}, {primary_address_postalcode}, {primary_address_country}

For a list of additional parameters you can use in the query, please refer to the Google Static Maps Developer Guide documentation on the Google Developer website.

Add Field to Record View

Now that the Location field has been created, you will need to add the field to the Record View layout. The field will not be added to the record view layout since the value is generated automatically, so there is nothing for the end user to edit.

Note: The field will need to be added to the DetailView layout for Legacy modules in Sugar 7.x.

  1. Navigate to the Admin panel and go to Studio > Contacts > Layouts > Record View.
  2. Drag and drop a new row into the layout where you would like to add the Location field.
  3. Drag and drop the Location field to the new filler spot.

     
  4. Once the layout is finalized, click "Save & Deploy" to preserve your changes and push the new field to your users. 

View Contact Record

Once the Location field is added to the Contacts record view layout, you can open up a contact record to view the Google map. Please note that the contact record must have their primary address street, city, postal code, and country populated for the map to generate properly.

Note: The Google map will appear on the detail view layout for Legacy modules in Sugar 7.x. 

Find similar articles in these categories:

PRODUCT: SugarCRM

AUDIENCE: Developers

Sarah Friedlander Garcia
Director of Marketing at W-Systems
More From This Author »