Adding a Google Map to a Module
Table of contents
This can be done to any module, custom or otherwise, that has a address field on it. This article will walk you thru how to add it on the contacts module for primary address. This customization requires no code level modifications and can be done completely thru studio in about 10 minutes.
The Basics
We will be creating a new field of type iFrame. This of an "iframe" as 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 (don't worry I looked up the hard part for you) 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. I asked it to deliver the results in embedded format so we don't display the whole search bar in the query. This website provides a good list of additional parameters for you to experiment with.
Files0
