Rutas por clinica 33

Rutas que pasan por la clinica 33

by Jorgelig

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=geometry&amp;.js"></script>
<div>
    <ul>
        <li>Las puntos rojos en el mapa son los cuartos encontrados, hacer click para ver los detalles</li>
        <li>El color en el nombre de la ruta del camion corresponde a la ruta que sigue en el mapa</li>
        <li>Para ver la trayectoria de una sola ruta, dar clic en "Link"</li>
    </ul>
</div>
<div>
    <button id="traffic">Mostrar trafico</button>
    <button id="transit">Mostrar vias principales</button>
    <button id="clear" style="display:none;">Limpiar rutas</button>
</div>
<div id="map" style="with: 100%;height:400px"></div>
<div>
    <div style="width: 50%;float:left;">
         <h3>Rutas hospital</h3>

        <ul id="path"></ul>
    </div>
    <div style="width: 48%;float: right;">
         <h3>Rutas Nocnok</h3>

        <ul id="nocnok-path"></ul>
    </div>
</div>

CSS

pre {
    margin: 5px 0;
}
ul {
    padding: 0 15px;
}
label {
    cursor: pointer;
}
#path {
    background-color: #C2C2C2;
}
#path li, #nocnok-path li {
    list-style: none;
    text-shadow: 0px 0px 1px rgba(150, 150, 150, 1);
}
#nocnok-path {
}
#map {
    margin: 10px 0;
}
.realty {
    width: 150px;
    height:100px;
}

JavaScript

var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
var trafficLayer = new google.maps.TrafficLayer();
var transitLayer = new google.maps.TransitLayer();
//Custom icons: 
//    http://mapicons.nicolasmollet.com/category/markers/offices/
//    
//Google icons: http://ex-ample.blogspot.mx/2011/08/all-url-of-markers-used-by-google-maps.html

// http://www.hexcolortool.com/
var colores = [
    '#1a1334', '#01545a', '#03c383',
    '#ef6a32', '#ed0345',
    '#710162', '#110141',
    '#fa482e', //r-69
'#f4a32e', //r-95
'#b1200f', //r-97
'#1F767F',
    '#17C700',
    '#065D66',
//'#B58F6E',

'#732422',
    '#4C2273',
    '#227173',
    '#EB403D',
    '#91EB3D',
    '#4C0F85',
    "#4F97D6"];
var rendererOptions = {
    suppressMarkers: true,
    suppressInfoWindows: true,
    preserveViewport: true,
    polylineOptions: {
        icons: [{
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                strokeColor: '#FFFFFF',
                strokeWeight: 1,
                strokeOpacity: .8,
                fillColor: '#666666',
                fillOpacity: .8,
                scale: 3,
            },
            offset: '0',
            repeat: '12px'
        }],
        strokeOpacity: 0
    }
};

var latlng = new google.maps.LatLng(25.670883, -100.319106);
var myOptions = {
    zoom: 13,
    center: latlng,
    draggableCursor: 'default',
    draggingCursor: 'pointer',

    mapTypeId: google.maps.MapTypeId.ROADMAP,
    panControl: false,
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.LEFT_BOTTOM
    },
    streetViewControl: false
};

map = new google.maps.Map(document.getElementById('map'), myOptions);


/*
{
    "titulo": "Renta: $ | ",
        "renta": "$",
        "direccion": "",
        "lat": ,
        "lng":
}
*/
var cuartos = [{
    "titulo": "Renta: $2,00 | *Martin de Zavala",
        "renta":...