Skip to content

Adding a Google Map to a SugarCRM module

Screen Shot 2012-02-19 at 11.21.57

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 = http://maps.google.com?q={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:

http://maps.google.com?q=

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

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

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.

&output=embed

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….

8 Comments Post a comment
  1. Nice post. If you’d like to take your Google Mapping to the next level, take a look at my free/open source Project on SugarForge:

    JJWDesign Google Maps
    http://www.sugarforge.org/projects/jjwgooglemaps/

    Cheers, Jeff

    February 26, 2012
    • Simon Chapman #

      Hi

      Thanks for the tip – I had a chance to look at the plugin and it looks good.

      Best wishes,

      Simon.

      March 10, 2012
  2. juan moreno #

    Hi good day, i’ve tried your solution but i have an error “Refused to display document because display forbidden by X-Frame-Options.” in my browser, how can i do to solve this error? thanks for your time

    February 29, 2012
    • Simon Chapman #

      Hi

      I know of this occurring in IE because your Sugar site needs to be added to Trusted Sites…are you using IE?

      Thanks,

      Simon.

      March 10, 2012
  3. Jenny #

    IFrame does not appear in the Data Type dropdown menu….so I am unable to add an Iframe…can you help me with this?

    January 17, 2013
    • Simon Chapman #

      Iframe does appear in the list of Data Types…have you double checked?

      March 12, 2013
  4. Eric #

    Since both SugarCRM and Google have changed things could you update this.

    SugarCRM has changed the Primary address to Billing, which is easy to change.

    Google has changes the maps so that the map is not centered any more, could you update this to reflect this?

    February 5, 2013
    • Simon Chapman #

      Yes, I’m publishing an updated guide shortly.

      March 12, 2013

Leave a Reply

You may use basic HTML in your comments. Your email address will not be published.

Subscribe to this comment feed via RSS