MarkerWithLabel

by nicolas tenorio

HTML

<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false&amp;.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map-canvas"></div>

CSS

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

.badge {
  /* display: block; */
  padding: 0 5px;
  /* font-family: Arial, sans-serif; */
  font: normal 11px tahoma, arial, helvetica, sans-serif;
  line-height: 16px;
  color: white;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.25);
  border: 1px solid;
  /* border-radius: 10px; */
  /* border-radius: 4px; */
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.08);
  /* height: 1.5em;
  line-height: 1.5em;
  padding: 0 .46em;
  text-align: center;
  text-shadow: 0 0.063em 0 rgba(0,0,0,.2);
  background-color: #eee;
  color: #364652;
  box-shadow: 0 0.063em 0.063em rgba(0,0,0,.2);
  border-radius: 4em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  */
}

.badge.blue {
  background: #67c1ef;
  border-color: #30aae9;
  background-image: linear-gradient(to bottom, #acddf6, #67c1ef);
  background-position;
  -12px;
  margin-left: -12px;
}

.wifi {
  background-image: url(https://servicios.siur.com.co/buscarutas/img/wifibus.svg);
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}

.inv {
  background-image: url(https://servicios.siur.com.co/buscarutas/img/invalidos.svg);
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}

.badge.yellow {
  background: #faba3e;
  border-color: #f4a306;
  background-image: -webkit-linear-gradient(top, #fcd589, #faba3e);
  background-image: -moz-linear-gradient(top, #fcd589, #faba3e);
  background-image: -o-linear-gradient(top, #fcd589, #faba3e);
  background-image: linear-gradient(to bottom, #fcd589, #faba3e);
}

.badge.red {
  background: #fa623f;
  border-color: #fa5a35;
  background-image: -webkit-linear-gradient(top, #fc9f8a, #fa623f);
  background-image: -moz-linear-gradient(top, #fc9f8a, #fa623f);
  background-image: -o-linear-gradient(top, #fc9f8a, #fa623f);
  background-image:...

JavaScript

var map;
var marker;
var latlng = new google.maps.LatLng(-25.282197, -57.6351);
var latlng_alt = new google.maps.LatLng(40.747688, -74.004142);

function initialize() {
  var mapOptions = {
    zoom: 14,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var busar = {
    url: "https://servicios.siur.com.co/buscarutas/img/busp.svg",
    scaledSize: new google.maps.Size(28, 26)
  };
  var trans = {
    url: "https://servicios.siur.com.co/buscarutas/img/trans.gif",
    //scaledSize: new google.maps.Size(28, 26)
  };
  var wilist = (22079,22085
22118
22062
22042
22161
22139
22141
22076
22108
22083
22130
22155
22125
22069
22089
22099
22103
22145
22122
22117
22110
22096
22090
22116
22109
22077
22065
22105
22093
22152
22098
22158
22143
22102
22157
22129
22073
22140
22080
22124
22133
22004
2200732003
32060
32056
32069
32082
32083
32063
32076
32072
32081
32040
32029
32068
32071
32065
32055
32078
32001
32002
32066
32057
32050
32058
32075
32073
32064
32037
32052
32006
32035
32032
32004
32024
32080
32062
32059
32053
32061
32067
32070
32010
32084)
  var aclist = ("12070, 12071,...