Google Maps Iframe
Display an Iframe with Google Maps using coordinates
Description
This is a very simple utility which can be used to create an iframe with a Google Map given you have the coordinates. It was intended to be used together with Map Location Field v3 as it requires longitude and latitude.
If you’re looking for a utility which can be used without longitude and latitude, then please have a look at: bzerangue’s Get Google Map utility.
This utility is nothing fancy. All it does is create a Google Maps url which it can use to render an iframe (or just return the url if you prefer).
Scroll down to the bottom for the utility it self.
Features
- Does not require Google API key
- Choose different map types
- Custom label text in the speech-bubble which shows up when you click the red “pin” in the map
- You can just get the Google Maps URL without rendering an iframe if you’d like
Example usage
EXAMPLE 1: Fetch data from the field type Map Location v3 and render iframe:
XSLT:
<xsl:call-template name="show-google-maps-iframe">
<xsl:with-param name="long" select="/data/school-entry/map/@longitude"></xsl:with-param>
<xsl:with-param name="lat" select="/data/school-entry/map/@latitude"></xsl:with-param>
<xsl:with-param name="label" select="/data/school-entry/title"></xsl:with-param>
<xsl:with-param name="zoom" select="/data/school-entry/map/map/@zoom"></xsl:with-param>
<xsl:with-param name="width">543</xsl:with-param>
</xsl:call-template>
If you have the following XML:
<data><school-entry>
<entry id="13">
<title handle="the-oslo-school-of-architecture-and-design">The Oslo School of Architecture And Design</title>
<map latitude="59.924183" longitude="10.750693">
<map zoom="17" centre="59.924183, 10.750693" api-key="" />
</map>
</entry>
</school-entry></data>
It would output this HTML:
<iframe height="420" frameborder="0" width="543" scrolling="no" src="http://www.google.com/maps?q=The Oslo School of Architecture And Design@59.924183,10.750693&z=17&t=k&ie=UTF8&output=embed&iwloc=near" marginwidth="0" marginheight="0"></iframe>
EXAMPLE 2: Get the url to create your own link
XSLT:
<xsl:variable name="href">
<xsl:call-template name="show-google-maps-iframe">
<xsl:with-param name="long" select="/data/school-entry/map/@longitude"></xsl:with-param>
<xsl:with-param name="lat" select="/data/school-entry/map/@latitude"></xsl:with-param>
<xsl:with-param name="label" select="/data/school-entry/title"></xsl:with-param>
<xsl:with-param name="zoom" select="/data/school-entry/map/map/@zoom"></xsl:with-param>
<xsl:with-param name="width">543</xsl:with-param>
<xsl:with-param name="returnUrl" select="true()"></xsl:with-param>
</xsl:call-template></xsl:variable>
<a href="{$href}">Link to Google Maps</a>
XML:
Same as previous example.
HTML:
<a href="http://www.google.com/maps?q=The Oslo School of Architecture And Design@59.924183,10.750693&z=17&t=k&ie=UTF8">Link to Google Maps</a>
This was created for a very simple and specific purpose. There are a lot of ways it can be improved.
If you have any difficulty using it or have any comments, just post in the discussion board and I’ll try to help!
XSLT
View Raw
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template name="show-google-maps-iframe"> <!-- Zoom: the map's zoom level. --> <xsl:param name="zoom">15</xsl:param> <!-- Lonitude and latitude coordinates --> <xsl:param name="long">0</xsl:param> <xsl:param name="lat">0</xsl:param> <!-- The label is the speech-bubble that pops up when you click the little red "pin" --> <xsl:param name="label"><xsl:text></xsl:text></xsl:param> <!-- Type of map you want: - map or m Regular map - satellite or k Satellite imagery - hybrid or h Map with satellite - terrain or p Terrain view --> <xsl:param name="mapType">k</xsl:param> <!-- The iframe's width and height --> <xsl:param name="width">543</xsl:param> <xsl:param name="height">420</xsl:param> <!-- LINK AFTER THE IFRAME --> <!-- If createLink is set to 'true', then a link is created after the iframe --> <xsl:param name="createLink" select="false()"></xsl:param> <!-- The link's text can be modified with this variable --> <xsl:param name="linkText">View Larger Map</xsl:param> <!-- Encoding, you probably don't need to change this --> <xsl:param name="charset">UTF8</xsl:param> <!-- Return the url. If this is set to 'true' then nothing is rendered, and the URL is returned. --> <xsl:param name="returnUrl" select="false()"></xsl:param> <xsl:variable name="urlMapType"> <xsl:choose> <xsl:when test="$mapType = 'map' or $mapType = 'm'"> <xsl:text>m</xsl:text> </xsl:when> <xsl:when test="$mapType = 'satellite' or $mapType = 'k'"> <xsl:text>k</xsl:text> </xsl:when> <xsl:when test="$mapType = 'hybrid' or $mapType = 'h'"> <xsl:text>h</xsl:text> </xsl:when> <xsl:when test="$mapType = 'terrain' or $mapType = 'p'"> <xsl:text>p</xsl:text> </xsl:when> <xsl:otherwise> <xsl:text>m</xsl:text> </xsl:otherwise> </xsl:choose> </xsl:variable> <xsl:variable name="url"> <xsl:text>http://www.google.com/maps?q=</xsl:text> <!-- Location and label --> <xsl:value-of select="$label"></xsl:value-of> <xsl:text>@</xsl:text> <xsl:value-of select="$lat"></xsl:value-of> <xsl:text>,</xsl:text> <xsl:value-of select="$long"></xsl:value-of> <!-- Zoom --> <xsl:text>&z=</xsl:text> <xsl:value-of select="$zoom"></xsl:value-of> <!-- Map type --> <xsl:text>&t=</xsl:text> <xsl:value-of select="$urlMapType"></xsl:value-of> <!-- Charset --> <xsl:text>&ie=</xsl:text> <xsl:value-of select="$charset"></xsl:value-of> </xsl:variable> <xsl:choose> <xsl:when test="$returnUrl = true()"> <xsl:value-of select="$url"></xsl:value-of> </xsl:when> <xsl:otherwise> <xsl:element name="iframe"> <xsl:attribute name="frameborder">0</xsl:attribute> <xsl:attribute name="marginheight">0</xsl:attribute> <xsl:attribute name="marginwidth">0</xsl:attribute> <xsl:attribute name="scrolling">no</xsl:attribute> <xsl:attribute name="width"><xsl:value-of select="$width"></xsl:value-of></xsl:attribute> <xsl:attribute name="height"><xsl:value-of select="$height"></xsl:value-of></xsl:attribute> <xsl:attribute name="src"> <xsl:value-of select="$url"></xsl:value-of> <xsl:text>&output=embed&iwloc=near</xsl:text> </xsl:attribute> </xsl:element> <xsl:if test="$createLink = true()"> <xsl:element name="a"> <xsl:attribute name="href"><xsl:value-of select="$url"></xsl:value-of></xsl:attribute> <xsl:value-of select="$linkText"></xsl:value-of> </xsl:element> </xsl:if> </xsl:otherwise> </xsl:choose> </xsl:template> </xsl:stylesheet>