I also normally write JS (jQuery) plugins that handle this but wanted to see how this works. It works fine but the issue with a utility like this is that it forces us to put quite a lot of 'stuff' (such as JS) in our templates…

And, as with multiple markers, any customization still needs to be done in Javascript.

Since Gmaps depend on Javascript jQuery could generate the map-container div's etc easily. The only 'challenge' would be to tie the Symphony content (from e.g. a Map Location field) to the JS, but that can be done with a little bit of inline JS or with e.g. a AJAX call to a custom XML 'API').

In my current setup I use this utility but I am thinking about going with a simple jQuery plugin instead since I rather keep my templates as clean as possible.

Would you mind sharing your plugin? How have you handled the coupling of the Symphony (location-) data to your JS?

The plugin is available to the public at

The project it was built because of was originally going to be Symphony, but due to my employers lack of interest in Symphony, it was built on Codeigniter. The idea to tie data in was to use a separate pages to output JSON in the format of the required options objects, using get parameters to call the pages, that way the URLs could be built in the XSL using the available data.

It is something I want to actually do in practice soon, and is also the reason I coded the Address Location field from other fields (Address, and Map Location v3). Sad thing is I never seem to find time to do these things ;o)

It seems to me that the <script> tag to be inserted into the html's head needs encoding of the & sign: &amp; (just before the key). I have changed my copy of the utility accordingly and now it works.

Get Google Map updated to version 1.6 on 10th of December 2013

Updated this utility to pull from the latest v3 geocoding service. This should work properly now.

Hello bzerangue, thanks for this utility. I am use it extensively. Now I think I've found a mistake in example 7:

Setting latlong to map/@center will show the marker at the wrong position if the map was moved in Nick's location field. I do this to sometimes when I want to show a specific area on the map with the marker not in its center. The code should therefore be (with an added parameter for centering):

<xsl:call-template name="get-google-map">
<xsl:with-param name="map-type" select="'ROADMAP'"/>
<xsl:with-param name="zoom-level" select="map-location/map/@zoom"/>
<xsl:with-param name="latlong" select="concat(map-location/@latitude, ', ', karte/@longitude)"/>
<xsl:with-param name="center" select="map-location/map/@center"/>
<xsl:with-param name="map-width" select="'200px'"/>
<xsl:with-param name="map-height" select="'200px'"/>

Centering the map at the point selected in the location field would need the following amendmend of your javascript:

var myLatLng = new google.maps.LatLng(<xsl:value-of select="$latlong"/>);
var myCenter = new google.maps.LatLng(<xsl:value-of select="$center"/>);
var myOptions = {
center: myCenter,

The added parameter would need to be added to the parameter pool at the beginning of your utility: <xsl:param name="center"/>.

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details