Where design meets development

Multiple markers



Before we render the markers on a map we need a datasource, just plain xml.

<?xml version="1.0" encoding="UTF-8"?>
  xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
  exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">
	<xsl:output method="xml" omit-xml-declaration="yes"/>
  <xsl:param name="currentPage"/>
  <xsl:template match="/">
    <!-- change the mimetype for the current page to xml -->
    <xsl:value-of select="umbraco.library:ChangeContentType('text/xml')"/>
    <xsl:text disable-output-escaping="yes">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</xsl:text>
		<xsl:apply-templates select="$currentPage/ancestor-or-self::root//node [@nodeTypeAlias='Organisatie' and (data[@alias='longitude'] != '') and (data[@alias='lattitude'] != '')]">
  <xsl:template match="node">
		<xsl:variable name="lattitude">
				<xsl:when test="number(substring-before(./data[@alias='lattitude'], '.')) &gt;  10">
					<xsl:value-of select="./data[@alias='lattitude']"/>
					<xsl:value-of select="./data[@alias='longitude']"/>
		<xsl:variable name="longitude">
				<xsl:when test="number(substring-before(./data[@alias='longitude'], '.')) &lt;  10">
					<xsl:value-of select="./data[@alias='longitude']"/>
					<xsl:value-of select="./data[@alias='lattitude']"/>
		<xsl:attribute name="name"><xsl:value-of select="./data[@alias='naam']"/></xsl:attribute>
		<xsl:attribute name="adres"><xsl:value-of select="./data[@alias='straatHuisnummer']"/></xsl:attribute>
		<xsl:attribute name="zip"><xsl:value-of select="./data[@alias='postcode']"/></xsl:attribute>
		<xsl:attribute name="url"><xsl:value-of select="umbraco.library:NiceUrl(./@id)"/></xsl:attribute>
		<xsl:attribute name="lat"><xsl:value-of select="$lattitude"/></xsl:attribute>
		<xsl:attribute name="lang"><xsl:value-of select="$longitude"/></xsl:attribute>

Using umbraco, we render the xml using some fields:


This will render an xml document like this:

<?xml version="1.0" encoding="UTF-8"?>
    <marker name="Bibliotheek, Banne Buiksloot" adres="Ankerplaats 18 (winkelcentrum)" zip="1034 KC Amsterdam" url="/organisaties/bibliotheek,-banne-buiksloot.aspx" lat="52.407393" lang="4.917412" />
    <marker name="Bibliotheek, Betondorp" adres="Brink 45" zip="1097 TV Amsterdam " url="/organisaties/bibliotheek,-betondorp.aspx" lat="52.340157" lang="4.94315" />
    <marker name="Bibliotheek, Bijlmermeer " adres="Bijlmerplein 93 (Amsterdamse Poort) " zip="1102 DA Amsterdam " url="/organisaties/bibliotheek,-bijlmermeer-.aspx" lat="52.31409" lang="4.951436" />
    <marker name="Bibliotheek, Bos en Lommer " adres="Bos en Lommerplein 176" zip="1055 EK Amsterdam" url="/organisaties/bibliotheek,-bos-en-lommer-.aspx" lat="52.378402" lang="4.845014" />


Now we have to make some template with corresponding javascripts to get the markers from the xml en render them on the map, using an additional script for handling a large amount of markers.


Well,this is where the fun begins, speaking in Umbraco terms;-)

  1. We’ll need to define the map
  2. get the markers
  3. create the boundaries
  4. and cluster the markers.

Define some variables and define the map

var map;
var lastWindow;
 var bounds;
 var icon;
 var fluster;
 var latlng;
     latlng = new google.maps.LatLng(52.37832379564726, 4.891319274902344);
     bounds = new google.maps.LatLngBounds();
     var myOptions = {
       center: latlng,
       mapTypeControl: true,
       mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      fluster = new Fluster2(map);

Get markers with AJAX request using jquery.ajax, define the boundaries and ad markers to the fluster collection.

    type: "GET",
    url: "organisatiesxml.aspx",
    dataType: "xml",
    success: function(xml){
                // Retrieve all needed values from XML
                var title = $(this).attr('name');
        var adres = $(this).attr('adres');
          var zip = $(this).attr('zip');
        var url= $(this).attr('url');
                var latitude = $(this).attr('lat');
                var longitude = $(this).attr('lang');
                var htmlString = "<strong>" + title + "</strong>
" + adres + "
" + zip + "
" + "<a>Bekijk organisatie</a>";
                // create a marker
                var myLatlng = new google.maps.LatLng(latitude,longitude);
                var marker = new google.maps.Marker(
                    position: myLatlng,
                    map: map,
                    title: title,
                    icon: icon
                    addInfoWindow(marker, map, htmlString);
            });// end each
    }); // end $.ajax
    // Set styles
   // These are the same styles as default, assignment is only for demonstration ...
   fluster.styles = {
       // This style will be used for clusters with more than 0 markers
       0: {
           image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m1.png',
           textColor: '#FFFFFF',
           width: 53,
           height: 52
       // This style will be used for clusters with more than 10 markers
       10: {
           image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m2.png',
           textColor: '#FFFFFF',
           width: 56,
           height: 55
       20: {
           image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m3.png',
           textColor: '#FFFFFF',
           width: 66,
           height: 65
   // Initialize Fluster
   // This will set event handlers on the map and calculate clusters the first time.
});// end function
function addInfoWindow(marker, map, message){
   /* set balloon */
   var infowindow = new google.maps.InfoWindow(
         content: message
   /* add listener to marker */
   google.maps.event.addListener(marker, 'click' ,function(){
   if(lastWindow) { lastWindow.close(); lastWindow = null; }
       lastWindow = infowindow;
};/* end function */

Additional function for the tooltip window

function addMarkerBubble(marker, map, message){
    // set balloon
    var infowindow = new google.maps.InfoWindow(
          content: message, size: new google.maps.Size(400,200)
    // add listener to marker
    google.maps.event.addListener(marker, 'click' ,function(){
    if(lastWindow) {
       lastWindow = null;
   lastWindow = infowindow;

final result

These functions will generate a map like:

Clicking a cluster will zoom in on the map.

Author: Folkert

I'm a webdeveloper, looking for the best experience, working between development and design. Just a creative programmer. When I'm getting tired of programming C#, i'd love to create 3D images in 3D Studio Max, play the guitar, create an app for Android or crush some plastics on a climbing wall or try to stay alive when i´m descending some nice white powdered snowy mountains on my snowboard.

Leave a Reply

Required fields are marked *.


Page optimized by WP Minify WordPress Plugin