Google Maps 2

by zolotnitskiy

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>
<div id="map-canvas"></div>

CSS

#map-canvas, body, html { 
    height: 100%; 
    margin: 0;
    padding: 0;
}

JavaScript

var map,
    polyOptions,
    markers = clearMarkers(),
    lines = [],
    id = 0,
    strokeOpt = {
        hover: {
            strokeWeight: 6,
            strokeOpacity: 1
        },
        hoverOut: {
            strokeWeight: 4,
            strokeOpacity: 0.8
        }
    };

function clearMarkers () {
    return {
        one: null,
        two: null
    };
}

function createMarker(text) {
    var img = document.createElement("canvas"), 
        canvas,
        txt={text}, 
        ctx=img.getContext("2d"),
        width = 30,
        padding = 4;
    
    ctx.font="600 13px 'Open Sans', 'Arial Narrow', Arial, sans-serif";
    txt.width = Math.floor(ctx.measureText(txt.text).width);
    width += txt.width;
    
    canvas = d3.select(img)
    .append("svg")
    .attr("version", 1.1)
    .attr("xmlns", "http://www.w3.org/2000/svg")
    .attr("width", width + "px")
    .attr("height", "40px"); 
    
    var filter = 
    canvas
    .append("defs")  
    .append("filter")
    .attr("id", "filter-1")
    .attr("x", "-50%")
    .attr("y", "-50%")
    .attr("width", "200%")
    .attr("height", "200%")
    .attr("filterUnits", "objectBoundingBox")
    
    filter
    .append("feOffset")
    .attr("dx", "0")
    .attr("dy", "2")
    .attr("in", "SourceAlpha")
    .attr("result", "shadowOffsetOuter1");   
    
    filter
    .append("feGaussianBlur")
    .attr("in", "shadowOffsetOuter1")
    .attr("stdDeviation", "2")
    .attr("result", "shadowBlurOuter1"); 
    
    filter
    .append("feColorMatrix")
    .attr("in", "shadowBlurOuter1")
    .attr("type", "matrix")
    .attr("values", "0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.107036911 0")
    .attr("result", "shadowMatrixOuter1");   
    
    
    var feMerge = 
    filter
    .append("feMerge");   
    
    feMerge
    .append("feMergeNode")
    .attr("in", "shadowMatrixOuter1")   
    
    feMerge
    .append("feMergeNode")
    .attr("in", "SourceGraphic")   
    
    var g = 
    canvas
    .append('g')
 ...