Author:
bzerangue
Version:
1.6
Release Date:
13 Oct 2009
Category:
Third-Party Integration

Description

Easily add a Google Map to your website. Instructions for use.

Version 1.6

Changes from 1.5: Updated the geocoding utility to use v3 since v2 has been phased out.

Changes from 1.4: Added in label parameter and now works with Nick Dunn's Map Location Field v3

Changes from 1.3: Added in params map-width and map-height

Changes from 1.2: After Google added in language support with v3, API Key needed for Geocode support

Changes from 1.1: Added the parameter map-id -- this will allow you to include multiple maps

Changes from 1.0: Now built for Google Maps API v3; Removed need for API Key; Added parameters map-type and zoom-level

XSLT

View Raw
<?xml version="1.0" encoding="UTF-8"?>
<!--
    Name: Get Google Map
    Version: 1.6
    Changes: added in label parameter and now works with Nick Dunn's Map Location Field v3
    Author: Brian Zerangue <brian.zerangue@gmail.com>
    URL: http://www.getsymphony.com/downloads/xslt/file/25937/
    
    ====================
    Description:
    ====================
    Easily add a Google Map to your website. 
    
    ====================
    Steps to use:
    ====================
    
    1) Get Google Maps API Key (for geocoding support)
    
    2) In the <xsl:variable> api-key, replace YOUR_API_KEY_HERE, with your Google Maps API Key
    
    3) Insert the following meta element and script element in the head element of your html
    
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://www.google.com/jsapi?autoload=%7Bmodules%3A%5B%7Bname%3A%22maps%22%2Cversion%3A3%2Cother_params%3A%22sensor%3Dfalse%22%7D%5D%7D&key=MY_KEY"></script>
    
    4) Import your template via xsl:import
    
    
    5) Call the template get-google-map and populate the with-param statements with the fields you have setup in Symphony.
    
    <xsl:call-template name="get-google-map">
        <xsl:with-param name="map-type" select="'HYBRID'"/>
        <xsl:with-param name="zoom-level" select="'17'"/>
        <xsl:with-param name="location-name" select="location"/>
        <xsl:with-param name="street-address" select="address"/>
        <xsl:with-param name="city" select="city"/>
        <xsl:with-param name="state" select="state"/>
        <xsl:with-param name="zip-code" select="zip"/>
        <xsl:with-param name="map-width" select="'500px'"/>
        <xsl:with-param name="map-height" select="'350px'"/>
        <xsl:with-param name="label" select="'yes'"/>
    </xsl:call-template>
    
    6) If you want to add multiple maps, call the templates but make sure to call the with-param name="map-id" and name your map id. Like so...
    
    <xsl:call-template name="get-google-map">
        <xsl:with-param name="map-type" select="'HYBRID'"/>
        <xsl:with-param name="zoom-level" select="'17'"/>
        <xsl:with-param name="location-name" select="location"/>
        <xsl:with-param name="street-address" select="address"/>
        <xsl:with-param name="city" select="city"/>
        <xsl:with-param name="state" select="state"/>
        <xsl:with-param name="zip-code" select="zip"/>
        <xsl:with-param name="map-width" select="'500px'"/>
        <xsl:with-param name="map-height" select="'350px'"/>
    </xsl:call-template>
    
    <xsl:call-template name="get-google-map">
        <xsl:with-param name="map-id" select="'map_canvas_2'"/>
        <xsl:with-param name="map-type" select="'HYBRID'"/>
        <xsl:with-param name="zoom-level" select="'17'"/>
        <xsl:with-param name="location-name" select="location"/>
        <xsl:with-param name="street-address" select="address"/>
        <xsl:with-param name="city" select="city"/>
        <xsl:with-param name="state" select="state"/>
        <xsl:with-param name="zip-code" select="zip"/>
        <xsl:with-param name="map-width" select="'500px'"/>
        <xsl:with-param name="map-height" select="'350px'"/>
    </xsl:call-template>
    
    7) Example: How to use with Nick Dunn's Map Location Field v3
    
    <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="map-location/map/@centre"/>
        <xsl:with-param name="map-width" select="'200px'"/>
        <xsl:with-param name="map-height" select="'200px'"/>
    </xsl:call-template>
    
    
    ### END OF INSTRUCTIONS ###
-->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml" encoding="UTF-8" omit-xml-declaration="yes" indent="yes" />
    <xsl:variable name="api-key" select="'YOUR_API_KEY_HERE'"/>
    <xsl:template name="get-google-map">
        <xsl:param name="map-id"/>
        <xsl:param name="map-width"/>
        <xsl:param name="map-height"/>
        <xsl:param name="location-name"/>
        <xsl:param name="street-address"/>
        <xsl:param name="city"/>
        <xsl:param name="state"/>
        <xsl:param name="zip-code"/>
        <xsl:param name="location-full-address" select="concat($street-address,' ',$city,' ',$state,' ',$zip-code)"/>
        <xsl:param name="location-no-city-address" select="concat($street-address,' ',$state,' ',$zip-code)"/>
        <xsl:param name="zoom-level"/>
        <!-- Map Type : Default = ROADMAP / Other Options = SATELLITE, HYBRID, OR TERRAIN -->
        <xsl:param name="map-type"/>
        <xsl:param name="latlong">
            <xsl:choose>
                <xsl:when test="remove-city-from-google-map='Yes'">
                    <xsl:call-template name="geocode">
                        <xsl:with-param name="address" select="$location-no-city-address"/>
                    </xsl:call-template>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:call-template name="geocode">
                        <xsl:with-param name="address" select="$location-full-address"/>
                    </xsl:call-template>
                </xsl:otherwise>
            </xsl:choose>
        </xsl:param>
        <xsl:param name="label"/>
        
        <xsl:param name="directions-to-map-link">
            <xsl:value-of select="concat('http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=',translate($location-full-address,' ','+'),',&amp;iwstate1=dir:to')"/>
        </xsl:param>
        
        
        
        <xsl:if test="$location-full-address!=''">
            <script type="text/javascript">
              function initialize() {
            		    var myLatLng = new google.maps.LatLng(<xsl:value-of select="$latlong"/>);
            		    var myOptions = {
            		      zoom: <xsl:choose><xsl:when test="$zoom-level!=''"><xsl:value-of select="$zoom-level"/></xsl:when><xsl:otherwise><xsl:text>14</xsl:text></xsl:otherwise></xsl:choose>,
            		      center: myLatLng,
            					mapTypeId: google.maps.MapTypeId.<xsl:choose><xsl:when test="$map-type!=''"><xsl:value-of select="$map-type"/></xsl:when><xsl:otherwise><xsl:text>ROADMAP</xsl:text></xsl:otherwise></xsl:choose>
            		    }
            		    var map = new google.maps.Map(document.getElementById("<xsl:choose><xsl:when test="$map-id!=''"><xsl:value-of select="$map-id"/></xsl:when><xsl:otherwise><xsl:text>map_canvas</xsl:text></xsl:otherwise></xsl:choose>"), myOptions);
            				var marker = new google.maps.Marker({
            				        position: myLatLng, 
            				        map: map
            				    });
            				<xsl:if test="$label='yes'">
            				var infowindow = new google.maps.InfoWindow({ 
            								content: '<strong><xsl:value-of select="$location-name"/></strong><xsl:if test="$location-full-address!=''"><br/><xsl:value-of select="$location-full-address"/></xsl:if><xsl:if test="$directions-to-map-link!=''"><br/><a href="{$directions-to-map-link}">Get Directions</a></xsl:if>',
            						    position: myLatLng
            						});
            				</xsl:if>		
            				infowindow.open(map);
            		  }
            		  google.setOnLoadCallback(initialize);         
            </script>
            <div id="event_map">
                <xsl:choose>
                    <xsl:when test="$map-id!=''"><div id="{$map-id}" style="width: {$map-width}; height: {$map-height}; border: 7px solid #ddd;"><!--Maps Here--></div></xsl:when>
                    <xsl:otherwise><div id="map_canvas" style="width: {$map-width}; height: {$map-height}; border: 7px solid #ddd;"><!--Maps Here--></div></xsl:otherwise>
                </xsl:choose>
            </div>
        </xsl:if>	
        
        
    </xsl:template>
    
<xsl:template name="geocode">
		<xsl:param name="address"/>
		<xsl:variable name="encodedAddress">
			<xsl:value-of select="translate($address,' ','+')"/>
		</xsl:variable>
		<xsl:variable name="urlString">http://maps.googleapis.com/maps/api/geocode/xml?address=<xsl:value-of select="$encodedAddress"/>&amp;sensor=false</xsl:variable>
		<xsl:variable name="geocoder" select="document($urlString)"/>
		<xsl:for-each select="$geocoder//*[name()='geometry']">
			<xsl:value-of select="location/lat"/><xsl:text>,</xsl:text><xsl:value-of select="location/lng"/>
		</xsl:for-each>
	</xsl:template>
</xsl:stylesheet>

Discuss this XSLT Utility

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