Hi Lou

Left click on the marker on the map - a dialogue appears with a link like "Use this location". This is how you save the co-ordinates and zoom.

Cheers

Nigel

Hi Nigel

Thanks for that, it works.

I still cannot get Locator Razor to work ith it.  What are you using to display Stores/Locations (multiple points) on a Google Map.

Lou

Hey Lou

I have just last week coded some xslt to plot multiple points on one Google Map using XSLT - I haven't braved learning razor yet...

Here's some code that hopefully makes some sense....

XSLT Code

<xsl:template name="southIslandGoogleMap">
<xsl:param name="locationsLandingPage"/>
<xsl:param name="showLocation"/>
<xsl:variable name="mapCenterCoords">
<xsl:choose>
<xsl:when test="string($showLocation) = '1'">
<xsl:value-of select="$currentPage/googleMap"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$locationsLandingPage/googleMap"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>

<xsl:variable name="nodeSetMapCenterCoords" select="umbraco.library:Split($mapCenterCoords,',')"/>
<xsl:variable name="mapZoom">
<xsl:choose>
<xsl:when test="string($showLocation) = '1'">
<xsl:text>16</xsl:text>
</xsl:when>
<xsl:otherwise>
<xsl:text>6</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>

<xsl:variable name="apos">
<xsl:text>'</xsl:text>
</xsl:variable>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
<xsl:value-of select="''"/>
</script>

<script type="text/javascript">
<xsl:text disable-output-escaping="yes"><![CDATA[
var headOfficeMarker = new google.maps.MarkerImage("/images/markerHeadOffice.png", new google.maps.Size(50, 39), new google.maps.Point(0, 0), new google.maps.Point(25,0));
var cncMarker = new google.maps.MarkerImage("/images/markerCNC.png", new google.maps.Size(46, 35), new google.maps.Point(0, 0), new google.maps.Point(23, 35));
var markers = []]></xsl:text>
<xsl:for-each select="$locationsLandingPage/LocationCashnCarry">
<xsl:variable name="coords" select="umbraco.library:Split(./googleMap,',')"/>
<xsl:value-of select="concat('{ lat :',$coords/value[1],',lng:',$coords/value[2],',name: &quot;',./@nodeName,' Cash ',$apos,'n Carry&quot;,markerImage:cncMarker,URL:&quot;',umbraco.library:NiceUrl(./@id),'&quot;}')"/>
<xsl:text>,
</xsl:text>
</xsl:for-each>

<xsl:for-each select="$locationsLandingPage/LocationHeadOffice">
<xsl:variable name="coords" select="umbraco.library:Split(./googleMap,',')"/>
<xsl:value-of select="concat('{ lat :',$coords/value[1],',lng:',$coords/value[2],',name: &quot;Head Office&quot;,markerImage:headOfficeMarker,URL:&quot;',umbraco.library:NiceUrl(./@id),'&quot;}')"/>
<xsl:text>
</xsl:text>
</xsl:for-each>

<xsl:text disable-output-escaping="yes"><![CDATA[
];
displayMap('locationsMapCanvas', ]]></xsl:text>
<xsl:value-of select="$mapZoom"/>
<xsl:text disable-output-escaping="yes"><![CDATA[, ']]></xsl:text>
<xsl:value-of select="$nodeSetMapCenterCoords/value[1]"/>
<xsl:text disable-output-escaping="yes"><![CDATA[', ']]></xsl:text>
<xsl:value-of select="$nodeSetMapCenterCoords/value[2]"/>
<xsl:text disable-output-escaping="yes"><![CDATA[', markers )");
]]></xsl:text>
</script>

<div id="locationsMapCanvas">
<xsl:value-of select="''"/>
</div>

</xsl:template>

Javascript Function

function displayMap(map, mapZoom, latitude, longitude, markers) {
    var latlng = new google.maps.LatLng(latitude, longitude);
    var myOptions = { zoom: mapZoom, center: latlng, mapTypeControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(document.getElementById(map), myOptions);

    //MARKER
    for (index in markers) {
        addMarker(markers[index]);
    }

    function addMarker(data) {
        var marker = new google.maps.Marker({ position: new google.maps.LatLng(data.lat, data.lng), map: map, title: "View details of " + data.name, icon: data.markerImage });
        google.maps.event.addListener(marker, "click", function () { window.location.href = data.URL; });
    }
}

I hope this helps - feel free to drop me a line at [email protected] if you need clarification on any of my shonky code :-)

Cheers

Nigel

Hi Nigel, can you please show how to call this displaymap js function within some template and give it parameters from content.

The

map, mapZoom, latitude, longitude, markers

- parameters gain values from the properties of content data.

Thanks

Alexander

is working on a reply...