Google Maps

This GeoCoding building blocks allow you to easily create GeoCoded content in your R5 system.
Subsequently you can render the GeoCoded content into your website by using the included TBB and indicating where the map should appear in the DWT design.

Installation instructions

  1. Add the GeoCode selection files (Cms\GeoCode.html and Cms\GeoCodeMap.html) to your website

  2. Set the custom url on a GEOlocation field in one or more schemas
    Once you've done this, a location can be set on a field with this custom URL by clicking on the field name.
    The name must be GEOlocation for it to be picked up by the RenderGoogleMaps TBB.

  3. Upload the assembly with the building blocks using TcmUploadAssembly.exe
    This will result in two building blocks being added: RenderGoogleMaps and AddScriptsToHead.

  4. Create a parameter schema named RenderGoogleMaps with a mandatory single SiteKey text field in it:

    <xsd:annotation>
        <xsd:appinfo>
            <tcm:Labels>
                <tcm:Label ElementName="SiteKey" Metadata="false">Google Maps Site Key</tcm:Label>
            </tcm:Labels>
        </xsd:appinfo>
    </xsd:annotation>
    <xsd:import namespace="http://www.tridion.com/ContentManager/5.0/Instance"/>
    <xsd:element name="Parameters">
        <xsd:complexType>
            <xsd:sequence>
                <xsd:element name="SiteKey" minOccurs="1" maxOccurs="1" type="xsd:normalizedString"/>
            </xsd:sequence>
        </xsd:complexType>
    </xsd:element>

    Associate the RenderGoogleMaps TBB with this parameter schema.

  5. Use the RenderGoogleMaps building block in a Component Template or Page Template
    Either directly set the Google Maps Site Key in the parameter or specify a value of Publication.MetaData.GoogleMapsSiteKey to look it up from the Public metadata.

  6. In the DWT in the place where you want to output the map, put the following fragment:

    ${GoogleMapsImage}

    This will output the map as a static image into your page. 
    If you want to render an interactive map when the visitor has javascript enabled, use the following fragment instead and continue with steps 6 and 7.

    <div id="@@GoogleMapsHtmlElementId@@" style="width:400px;height:400px">${GoogleMapsImage}</div>

  7. In the DWT that renders the Geocoded content, put the following fragment to output the metadata into the HTML.

    <span class="geo" style="display: none"><span class="latitude">${Latitude}</span><span class="longitude">${Longitude}</span></span>

    Note that the outer span hides the information, so it won't show up to the visitor.
     
  8. If you want a dynamic map to replace the static map when the visitor has JavaScript enabled, put the following fragment in the head of your Page design:

    @@GoogleMapsScript@@

    Alternatively you can put the fragment anywhere in your Component design and use the MoveScriptsToHead building block in your Page Template.            

 

Static vs. dynamic map

If you render the HTML as described in this document, the HTML will be configured to render both a static and a dynamic map.

The static map will be shown initially. It consists of an image tag that retrieves the map as an image from the Google servers.

The dynamic map will be rendered when you include the script fragment in the head of your page.

Once the dynamic map is rendered it will replace the static map. On a reasonable fast connection users should never see the static map.

The static map is rendered as a 400x400 pixel image. If you want it to be rendered in a different size, download the source code of this package and modify the Image.html file.
 

Templates

The rendering of the maps is based on two templates: Script.js (for the dynamic map) and Image.html (for the static map).

Templates are passed through the .NET FormatString method, allowing them to be tailored for your specific map.
The following parameters are available in each template: key, divId, zoom, the lat/lon markers in URL encoded Google Maps static map format and the |-separated titles.
 

Google Maps site key

Google Maps requires you to create a site key for each site/URL where you want to render a map.

Use of such a site key on a different site/URL than the one for which it was created will resulted in a popup warning message.
To use the GeoCoding integration with Google Maps you'll need to register for your own site key with Google Maps (http://code.google.com/apis/maps/signup.html).

A single site key can be used for all subdomains under the domain it was registered for.

So if you register a site key for sdltridion.com it will work for www.sdltridion.com, cms.sdltridion.com, staging.sdltridion.com, etc.



Potential improvements

  1. Also make it work with Yahoo maps and Live maps (parameterize choice)
  2. Create a geographic proximity query TBB (like the Component Query, but this one queries on geographics proximity)            

Developer
Company
License agreement
Download package
Tags
:    Maps,  Google,  Geocoding,  Mashup
Version
:   1.0
Source
:   Yes

About the Author
Frank van Puffelen
Technical Director

Frank joined SDL in 2004 and as a principal developer worked on many of the company's releases until the end of 2012. He is now the technical director of ZyLAB USA.

ZyLAB

Most Popular Building Blocks

These are the most popular Building Blocks. Did you already get them?