WTS - Branded Map

by Paulo Ávila

HTML

<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=weather&language=es"></script>

<div id="panel">
    <select onchange="setStyle(this)">
        <option value="branded">WTS Branded</option>
        <option value="roadmap">Roadmap</option>
        <option value="terrain">Terrain</option>
        <option value="hybrid">Hybrid</option>
        <option value="satellite">Satellite</option>
    </select>
    <button onclick="toggleTransit()">Toggle Transit Layer</button>
    <button onclick="toggleWeather()">Toggle Weather Layer</button>
    <button onclick="toggleCloud()">Toggle Cloud Layer (zoom out)</button>
</div>

<div id="map"></div>

CSS

#map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#panel { z-index: 1; position: absolute; top: 10px; left: 40px; }

JavaScript

// https://github.com/jawj/OverlappingMarkerSpiderfier

var wtsMarkerHouse = 'http://sbs.waytostay.com/ITC/map-marker-house.png',
    // we can use it as an SVG symbol too
// https://developers.google.com/maps/documentation/javascript/overlays#PolylineSymbols
// https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate
// put the symbol on a polyline and animate it's offset!
    wtsMarkerHouseSVGSymbol = {
        path: "M18.234,19.463v-8.144h2.234c0.191,0,0.364-0.115,0.438-0.293c0.072-0.177,0.032-0.381-0.104-0.517l-3.643-3.643V3.555c0-0.222-0.18-0.401-0.401-0.401h-1.707c-0.222,0-0.401,0.18-0.401,0.401v0.803l-3.634-3.634c-0.186-0.186-0.486-0.186-0.671,0L0.56,10.51c-0.137,0.136-0.177,0.34-0.104,0.517c0.073,0.178,0.246,0.293,0.438,0.293h2.1v8.144c0,0,0.763,1.372,7.663,1.372S18.234,19.463,18.234,19.463z",
        scale: 1,
        fillColor: "#e75113",
        fillOpacity: 1,
        strokeColor: "white",
        strokeOpacity: 1,
        strokeWeight: 2
    },
    
    wtsMarkerClusterGT99 = 'http://sbs.waytostay.com/ITC/map-marker-house-cluster.png',
    wtsMarkerClusterGT9 = 'http://sbs.waytostay.com/ITC/map-marker-house-cluster-radar-partial.png',
    wtsMarkerClusterGT1 = 'http://sbs.waytostay.com/ITC/map-marker-house-cluster-radar.png',
    
    wtsMarkerHouseGroup_closed = 'http://sbs.waytostay.com/ITC/map-marker-house-group_closed.png',
    wtsMarkerHouseGroup_open = 'http://sbs.waytostay.com/ITC/map-marker-house-group_open.png',
    
    wtsOrangeMarker = 'http://www.waytostay.com/assets/images/markers/map-pin_apt.png',
    wtsBlueMarker = 'http://www.waytostay.com/assets/images/markers/map-pin_landmark.png',
    wtsMarkerShadow = 'http://www.waytostay.com/assets/images/markers/map-pin_shadow.png',

    // http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html    
    mapStyleOptions = [
        {
            "featureType": "water",
            "stylers": [
                {
                   ...