Creating a Google Map

Last Updated: 17 Dec 2015

The following example will create a Google Map for our web site, displaying the Grand Slam tennis tournaments around the world. The map will contain locations listed by both coordinated and addresses and have an Asset Listing for these locations. Users will also be able to create their own locations using an Asset Builder.

Tip: Remember that you must Commit any asset changes that you make.

Setting Up the Google Map

The Tennis Grand Slams Google Map
The Google Map in the Asset Map

  1. Add a Google Map under your Site, titled Tennis Grand Slams, as shown in the figure to the right.
  2. Right click on the Google Map asset in the Asset Map and select the Details screen.
  3. In the API Key field, enter the API key provided to you by Google. If you do not have an API key, you must sign up for one at the Google Code website.
  4. In the Map Control field, select Large Control. This means that users will have full navigation and zoom control on the Google Map.
  5. In the Map Type Control field, select Yes. This will let users see the map type bar.
  6. In the Enable Street View field, select Yes. This willenable the Street View options when formatting the Google Map layout.
  7. In the Enable Google Earth field, select Yes. This will show the Google Earth map type on the map type bar. In order for users to use this function they must have the Google Earth plug-in installed.
  8. Click Commit. Globes will appear in the Default Settings section next to the Default Map Center fields.
    Click one of the globes to open a map below and choose a defalt location by clicking the map, as shown in the figure below.              

    Editing the Default Map Center settings on the Details screen
    Editing the Default Map Center settings on the Details screen              

  9. In the Default Map Type field, select Hybrid Map.
  10. In the Map Initialisation section, change the width of the map and street view initialisations to 500px by 200px, as shown in the figure below.              

    Editing the pixel width in the Map Initialisation section of the Details screen
    Editing the pixel width in the Map Initialisation section of the Details section              

Adding the Map Locations

The location Folders
The location Folders

  1. Create a Folder outside your site, named Locations.
  2. Under the Locations Folder, add two additional Folders called Grand Slams and Cities. The Folders will appear in the Asset Map, as shown in the figure to the right.
  3. Create four Google Map Location assets under the Grand Slams Folder, titled Australian Open, Roland Garros, Wimbledon and US Open.
  4. Create four Data Record assets under the Cities Folder, titled Melbourne, AustraliaParis, France; London, Great              

    The location assets
    The location assets                       

          Britain
    ; and New York, USA.

    Once you have done this, eight assets will appear under the Locations Folder in the Asset Map, as shown in the figure to the right.

Adding a Metadata Schema

To set up the Data Record locations, a Metadata Schema needs to be applied to the Locations folder with the location information.

To do this:

  1. Create a Metadata Schema under your Site, titled Location Information.
  2. Add a section to the Metadata Schema and add two Text fields titled Address and Description, as shown in the figure below.      

    The Metadata Fields in the Location Information Metadata Schema
    The Metadata Fields in the Location Information Metadata Schema        

  3. Apply the Metadata Schema to the Locations folder and its children.         

    Tip: As the Data Record locations are going to be listed by address and not have individual icons, latitude, longitude and icon URL metadata fields are not required.         

Setting Up Each Location

Now that each location has been added to the Locations folder and a Metadata Schema applied, the
latitude, longitude and address settings need to be configured.

Australian Open Location

To set up the Australian Open location:

  1. Right click on the Australian Open Google Map Location asset under the Locations Folder in the Asset Map and select the Details screen.
  2. In the Latitude field, enter -37.821667.
  3. In the Longitude field, enter 144.978333.
  4. In the Description field, enter The Grand Slam of Asia/Pacific.
Roland Garros Location

To set up the Roland Garros location:

  1. Right click on the Roland Garros Google Map Location asset under the Locations Folder in the Asset Map and select the Details screen.
  2. In the Latitude field, enter 48.847164.
  3. In the Longitude field, enter 2.249217.
  4. In the Description field, enter Les Internationaux de France de Roland Garros.
Wimbledon Location

To set up the Wimbledon location:

  1. Right click on the Wimbledon Google Map Location asset under the Locations Folder in the Asset Map and select the Details screen.
  2. In the Latitude field, enter 51.433744.
  3. In the Longitude field, enter -0.214064.
  4. In the Description field, enter The Championships.
US Open Location

To set up the US Open location:

  1. Right click on the US Open Google Map Location asset under the Locations Folder in the Asset Map and select the Details screen.
  2. In the Latitude field, enter 40.749794.
  3. In the Longitude field, enter -73.846086.
  4. In the Description field, enter A USTA Event.
Melbourne, Australia Location

To set up the Melbourne, Australia location:

  1. Right click on the Melbourne, Australia Data Record asset under the Locations Folder in the Asset Map and select the Metadata screen.
  2. In the Address metadata field, enter Melbourne, Australia.
  3. In the Description metadata field, enter The home of the Australian Open.
Paris, France Location

To set up the Paris, France location:

  1. Right click on the Paris, France Data Record asset under the Locations Folder in the Asset Map and select the Metadata screen.
  2. In the Address metadata field, enter Paris, France
  3. In the Description metadata field, enter The home of Roland Garros.
London, Great Britain Location

To set up the London, Great Britain location:

  1. Right click on the London, Great Britain Data Record asset under the Locations Folder in the Asset Map and select the Metadata screen.
  2. In the Address metadata field, enter London, Great Britain
  3. In the Description metadata field, enter The home of Wimbledon.
New York, USA Location

To set up the New York, USA location:

  1. Right click on the New York, USA Data Record asset under the Locations Folder in the Asset Map and select the Metadata screen.
  2. In the Address metadata field, enter New York, USA
  3. In the Description metadata field, enter The home of the US Open.

Configuring the Listing Options

Before the locations can be seen on the Google Map, the map needs to be told to list those locations.

To do this:

  1. Right click on the Tennis Grand Slams Google Map in the Asset Map and select the Listing Options screen.
  2. In the Asset Types to List field, select Google Map Location and Data Record.
  3. In the Root Nodes field, select the Grand Slams and Cities location Folders.
  4. Click Commit. The Keyword mapping for Data Record fields will appear under the Asset Types to List section. These fields allow you to set up the location information for Data Record assets.
  5. In the Location Name keyword field, enter . This will display the name of the asset as the location name on the map.
  6. In the Description keyword field, enter . This will show the Description metadata on the map.
  7. In the Address keyword field, enter . This will search the map for the information entered into the Address metadata.      

    Keyword Mapping for the Data Record assets
    Keyword Mapping on the Listing Options screen      

  8. The geocoding service must now be enabled. This will allow the address information in the location metadata to be converted into geographical coordinates and plotted on the Google Map. It will also allow us to add an Address Finder search bar to the map.

    To do this:

    i) Right click on the Google Map and select the Details screen.

    ii) In the Enable Geocoding Service field, select Yes.

Defining the Layout of the Google Map

Page Contents Bodycopy

The default layout of the Tennis Grand Slam map is shown in the figure below.

The default layout of the Google Map
The default layout of the Tennis Grand Slam Google Map

The locations, set up in the previous step, appear on the map and in the Asset Listing. However, the assets are not in an appropriate order, The page also requires a heading, address finder search bar, toolbar and Street View options. To do this, we need to change this layout so that these additions are available.

To change this layout:

  1. Right click on the Page Contents Bodycopy in the Asset Map and select Edit Contents.
  2. The content shown in the figure below is entered into the WYSIWYG Editor.    

    The WYSIWYG Editor on the Page Contents Bodycopy
    The WYSIWYG Editor on the Page Contents Bodycopy      

    The address finder search bar, tool bar, street view window and toggle text keyword replacements have been added. A table has also been used to position the Google Map to one side of the page, with the additional features next to it.  
Custom Grouping Format

The Listing Options also need to be altered by creating a Parent Asset group. To do this:

  1. Right click on the Tennis Grand Slams map in the Asset Map and select the Asset Grouping screen.
  2. Add a new group of type Parent Asset and click Commit. New fields will appear on the screen.
  3. Select the Direct Parents Only field.
  4. In the Sort By field, select Asset ID.
  5. Click Commit. Click the Edit Group Format link to be taken to the Group Level 1 Format Bodycopy.
  6. The content shown in the figure below is entered into the WYSIWYG Editor.      

    The WYSIWYG Editor on the Custom Group Format Bodycopy
    The WYSIWYG Editor on the Custom Group Format Bodycopy      

    A title for each group and its contents has been added.
  7. Alter the List Format of the Google Map to use Custom Grouping. This will list the assets in the Asset Map under either the Grand Slams or Cities groups.

    To do this:

    i) Right click on the Tennis Grand Slams map in the Asset Map and select the Listing Options screen.

    ii) In the List Format field, select Custom Grouping.

The new layout of the Tennis Grand Slams map is shown in the figure below.

The new layout of the Google Map
The new layout for the Tennis Grand Slam Google Map

Pop-up Layout

The default layout of a Google Map Location
The default layout of the Google Map Location popup

When a location on the map is clicked, a pop-up window appears with information on that location. The default layout of these pop-ups is shown in the figure to the right.

The formatting of the pop-up quite simple and the pop-up can be difficult to view if the description is longer than the map width. We need to create a new pop-up layout.

To change this layout:

  1. Right click on the Popup Bodycopy in the Asset Map and select the Edit Contents screen.
  2. The content shown in the figure below is entered into the Raw HTML Div.    

    The Raw HTML Div on the Popup Window Bodycopy
    The Raw HTML Div on the Popup Window Bodycopy    

    The new layout of the Google Map Location popup
    The new layout of the location pop-up    

    The pop-up window now lists the location and location description in smaller text and has a set width.

    The new layout of the pop-up is shown in the figure to the right.  

Adding an Asset Builder

An Asset Builder needs to be created to allow users to add locations to the map.

Configuring the Asset Builder

To create and configure the Asset Builder:

  1. Enable the create location feature. This will allow users to search for locations using the address finder search bar and then input those coordinates into the Asset Builder.

    To do this:

    i) Right click on the Google Map and select the Details screen.

    ii) In the Enable Create Location field, select Yes.    

    Tip: Users will be able to manually create locations with an Asset Builder without the Enable Create Location field set to Yes. However they will not be able to draw geographical coordinates from their searches.     

  2. The Create Location Form Layout Bodycopy of the Asset Builder
    The Location Create Form Layout Bodycopy  

      Create an Asset Builder titled Create Location.
  3. On the Details screen of the Asset Builder, select Google Map Location in the Asset Type to Create field.
  4. Click Commit. New fields will appear on the Details screen.
  5. In the Create Form Customisation field, enable Customise Create Form? option for the Google Map Location asset type.
  6. Click Commit. The Google Map Location Create Form Layout Bodycopy will appear in the Asser Map, as shown in the figure above.
  7. Next we need to change the format of the Asset Builder.

    To do this:

    i) Right click on the Google Map Location Create Form Layout Bodycopy and select Edit Contents.

    ii) The content shown in the figure below is entered into the WYSIWYG Editor.    

    The WYSIWYG Editor on the Create Location Form Layout Bodycopy
    The WYSIWYG Editor on the Location Create Form Layout Bodycopy    

    The Asset Builder now contains only the Location Name, Latitude and Longitude fields.
  8. The Created page of the Asset Builder needs to be redirected back to the map.

    To do this:

    i) Create a Redirect Page with the location as the Google Map asset.

    ii) Right click on the Created Bodycopy of the Asset Builder and select Edit Contents.

    iii) Create a new DIV of Nest Content type and nest the Redirect Page.
  9. Right click on the Asset Builder and select the Create Locations screen.
  10. In the Fixed Create Locations field, select the Locations Folder.
Adding the Asset Builder to the Google Map

Now that the Asset Builder is configured, it needs to be nested in the Tennis Grand Slams map.

To do this:

  1. Right click on the Page Contents Bodycopy in the Asset Map and select the Edit Contents screen.
  2. Create three new divisions under the WYSIWYG Editor of type Raw HTMLNest Content and Raw HTML.
  3. In the Nest Content division, nest the Create Location Asset Builder.
  4. In the Raw HTML divisions, content is added, as shown in the figure below.    

    The Asset Builder nested on the Page Contents Bodycopy
    The Page Contents Bodycopy of the Tennis Grand Slams Google Map    

    The Asset Builder has been nested within the Google Map Asset Builder keyword replacement HTML and the New Address List has been added below it.

    The new layout of the Tennis Grand Slams map is shown in the figure below.   

The Create Location Asset Builder on the Google Map page
The Asset Builder on the Tennis Grand Slams Google Map

Final Steps

Before making the Tennis Grand Slams map Live to the public, check the following things:

  • The layout of the page contents is correct.
  • The map locations direct to the appropriate coordinates.
  • The Address Finder bar works correctly.
  • The Street View options work correctly.
  • The Asset Builder works correctly and redirects back to the map page.

Once you are sure the Google Map is working correctly, change its Status to Live and grant Public Read Permission.

Send Feedback

Noticed an error?
Want to suggest an improvement?

Let Us Know

The Latest

Let Us Know What You Think

Let us know if you spot any errors or if you have any ideas on how we can improve the Matrix Community Website.

Contact Squiz for Demo

Let us show you the true power of Squiz Matrix by giving you a personalised demonstration.