Symphony.

A new XSLT utility, “Get Google Map” is now available for download. Comments and feedback can be left here but if you discover any issues, please post it on the issue tracker.

Get Google Map updated to version 1.3 on 9th of May 2010

Thanks for this, Brian. It’s working very well.

I tried submitting an issue, but wasn’t successful, so I’m trying again here:

The map dimensions parameters are not available for output

The parameters for map-width and map-height are used in the instructions, but don’t actually do anything to the output. I’ve add the parameters at lines 79 and 80:

<xsl:param name="map-width"/>
<xsl:param name="map-height"/>

And use them to output the dimensions in lines 133 and 134:

<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;"></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>

I’m sorry Stephen. I’ll get this fixed.

Get Google Map updated to version 1.4 on 13th of May 2010

Thanks, Brian.

When I say I tried submitting an issue, I mean there was an error when trying to save the post to the issue tracker. I would click on the “Submit Issue” button and nothing would happen. So, there seems to be an error with the issue tracker; nothing for you to apologize for. It’s a very easy to use utility.

I’m glad to be able to contribute at least somewhere. Y’all help me so much as it is. It’s nice to be able to give back some to the community.

I’m glad it’s been helpful to you.

The Google Maps code doesn’t work for me.
This is the source of my code after I visit the front-end.

    <script type="text/javascript"> 
  function initialize() {
                var myLatLng = new google.maps.LatLng(52.0126524, 6.2896689);
                var myOptions = {
                  zoom: 17,
                  center: myLatLng,
                        mapTypeId: google.maps.MapTypeId.HYBRID
                }
                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                    var marker = new google.maps.Marker({
                            position: myLatLng, 
                            map: map
                        });
                    var infowindow = new google.maps.InfoWindow({ 
                                    content: '<strong>183953</strong><br />Keijenborgseweg 7021 KP Zelhem Nederland<br /><a href="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=nl&amp;geocode=&amp;q=Keijenborgseweg+7021+KP+Zelhem+Nederland,&amp;iwstate1=dir:to">Get Directions</a>',
                                position: myLatLng
                            });
                    infowindow.open(map);
              }
              google.setOnLoadCallback(initialize);         
&lt;/script> 
      <div id="event_map"> 
        <div id="map_canvas" style="width: 700px; height: 450px; border: 7px solid #ddd;"></div> 
      </div>

Would you mind posting your code both XML and your XSLT?

Is the problem the HTML encoding of the script element, or was it pasting into the forum that did that?

<script

@ nickdunn: That was by the forum.

@ bzerangue

The XSLT

<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="ds:PandID"/>
                        <xsl:with-param name="street-address" select="ds:Straat"/>
                        <xsl:with-param name="city" select="ds:Plaats"/>
                        <xsl:with-param name="state" select="ds:Land"/>
                        <xsl:with-param name="zip-code" select="ds:Postcode"/>
                        <xsl:with-param name="map-width" select="'700px'"/>
                        <xsl:with-param name="map-height" select="'450px'"/>
                    </xsl:call-template>

The XML

<Straat>Nieuwe Boteringestraat</Straat>
<Huisnummer>75</Huisnummer>
<HuisnummerToev>B</HuisnummerToev>
<Postcode>9712 PK</Postcode>
<Plaats>Groningen</Plaats>
<Land>Nederland</Land>

Get Google Map updated to version 1.5 on 19th of June 2010

@whgdesign - First off, sorry for the delayed response. It’s been a little crazy on my end lately. I was able to get this to work.

<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="'PandID'"/>
    <xsl:with-param name="street-address">
        <xsl:value-of select="Huisnummer"/>
        <xsl:text> </xsl:text>
        <xsl:value-of select="HuisnummerToev"/>
        <xsl:text> </xsl:text>
        <xsl:value-of select="Straat"/>
    </xsl:with-param>
    <xsl:with-param name="city" select="Plaats"/>
    <xsl:with-param name="state" select="Land"/>
    <xsl:with-param name="zip-code" select="Postcode"/>
    <xsl:with-param name="map-width" select="'700px'"/>
    <xsl:with-param name="map-height" select="'450px'"/>
</xsl:call-template>

@bzerangue thanks for this utility. It worked faultlessly for me in conjunction with Nick Dunn’s Map Location Field.

I now want to use it again but rather than sending it lat/long data I’d like to get it to point to a particular business (so that the pointer on the map on our contact page is clickable and contains business information).

Is it possible to either:

1. Send parameters to the template which populate the marker with information or
2. Use the location-name parameter to include the business name or some identifier for the business? I have tried this without success.

Thanks in advance. Stuart

Thanks @stuartgpalmer! I’m glad it’s been helpful to you.

I now want to use it again but rather than sending it lat/long data I’d like to get it to point to a particular business (so that the pointer on the map on our contact page is clickable and contains business information).

Is it possible to either:

1. Send parameters to the template which populate the marker with information or
2. Use the location-name parameter to include the business name or some identifier for the business?

I have tried this without success

How are you calling the template? Would you mind posting the XSL and any necessary XML?

The XSL looks like this:

    <xsl:call-template name="get-google-map">
    <xsl:with-param name="map-type" select="'ROADMAP'"/>
    <xsl:with-param name="zoom-level" select="16"/>
    <xsl:with-param name="location-name" select="'Orme Retail'"/>
    <xsl:with-param name="street-address" select="'52 Brooks Mews'"/>
    <xsl:with-param name="city" select="'London'"/>
    <xsl:with-param name="state" select="'London'"/>
    <xsl:with-param name="zip-code" select="'W1K 4EE'"/>
    <xsl:with-param name="map-width" select="'248px'"/>
    <xsl:with-param name="map-height" select="'313px'"/>
    <xsl:with-param name="map-id" select="'contactgooglemap'"/>
</xsl:call-template>

As you see, the location data isn’t coming from the database but is hard-coded into the XSL code. What I want to achieve is the map pointer appearing as it does on this search on Google Maps.

Thanks

Actually, add <xsl:with-param name="label" select="'yes'"/>.

<xsl:call-template name="get-google-map">
            <xsl:with-param name="map-type" select="'ROADMAP'"/>
            <xsl:with-param name="zoom-level" select="16"/>
            <xsl:with-param name="label" select="'yes'"/>
            <xsl:with-param name="location-name" select="'Orme Retail'"/>
            <xsl:with-param name="street-address" select="'52 Brooks Mews'"/>
            <xsl:with-param name="city" select="'London'"/>
            <xsl:with-param name="state" select="'Westminster'"/>
            <xsl:with-param name="zip-code" select="'W1K 4EE'"/>
            <xsl:with-param name="map-width" select="'248px'"/>
            <xsl:with-param name="map-height" select="'313px'"/>
            <xsl:with-param name="map-id" select="'contactgooglemap'"/>
 </xsl:call-template>

I’m just looking at this for a possible project, and I’d like to know if it’s possible to create multiple points on the map?

For instance, the customer does a search and gets a list of locations returned that are all plotted on a map on the page?

@designermonkey I am just starting with this utility and from a first glance it seems not possible to display mutliple markers. This, however, is quite trivial to do with some extra Javascript in the initialize function.

PS: I realize it's been a while since you asked and I'm sure you've found a way, but for other people wondering…

You basically need to loop over a marker collection (based on static JS or taken from e.g. a DS) and re-use an marker (google.maps.Marker object) with different position, optionally add an infoWindow etc.

Also, I've found a small bug: on line ~#148 there's a infowindow.open(map); that should be inside the </xsl:if>. Otherwise, setting label to 'no' results in an error when the script tries to access infowindow (which is only initialised inside the preceding <xsl:if/>

Another tint issue I had is with the inline styles of border: 7px solid #ddd; on the map div element. Firstly I believe it's better to have the user set the styles themselves in their CSS and secondly this 7px border adds to the total width resulting in a div that's actually 14px wider than the given size…

Other than that it's a neat utility that works well together with e.g. Nick's Location Map V3 extension. Kudos!

One last thing: I don't think the API key is needed. It certainly is not needed for v3 and I don't think it's needed for geolocation, is it?

I've actually written a jQuery plugin for Google Maps that I use now, I was just curious about this.