Несколько HTML-маркеров на карте Google

[PeterLS]

Здравствуйте! Подскажите, пожалуйста, что не так делаю?.. Почему-то пишет что функция setMap не определена (здесь 37 строка в js коде)!

var o = document.getElementById("map-canvas");if (o) {    //карта    mapCenter = new google.maps.LatLng(56.528960, 84.967544);    var mapOptions = {        zoom: 15,        center: mapCenter,        scrollwheel: false,        mapTypeId: google.maps.MapTypeId.ROADMAP    };    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);    //элементы    var li_points = $('#map-points').find('li'), options = [], pLatLng = [];    if (li_points.length > 0) {        li_points.each(function(i){            var $pt = $(this);            if ($pt.data('x') && $pt.data('y') && $pt.data('type')) {                pLatLng[i] = new google.maps.LatLng($pt.data('x'), $pt.data('y'));                options[i] = {                    id: i,                    map: map,                    latLng: pLatLng[i],                    className: 'map-marker ' + $pt.data('type')                }            }        });    }    for (var i in options) {        function MapMarker(options) {            this.latLng = options.latLng;            this.map = options.map;            this.className = options.className;            this.id = options.id;            this.content = '';            this.setMap(options.map);        }        var marker = new MapMarker(options[i]);        //действие при клике        var markers = [];        markers[marker.id] = marker;        $(document).on('click', '.map-marker', function() {            console.log(marker.id);        });        MapMarker.prototype = new google.maps.OverlayView();        MapMarker.prototype.draw = function() {            var me = this;            var div = this.div_;            if (!div) {                div = this.div_ = document.createElement('div');                div.id = this.id;                div.className = this.className;                var panes = this.getPanes();                panes.overlayImage.appendChild(div);            }            var point = this.getProjection().fromLatLngToDivPixel(this.latLng);            if (point) {                div.style.left = point.x - 20 + 'px';                div.style.top = point.y - 55 + 'px';            }        };    }}

<div id="map-canvas"></div><ul id="map-points">    <li data-x="56.528960" data-y="84.967544" data-type="running">Point 1</li>    <li data-x="57.528960" data-y="83.967544" data-type="running">Point 2</li></ul>

body {margin: 0;}#map-canvas {  width: 100%;  height: 100vh;  margin: auto;}#map-points {display: none;}.map-marker.running {background-image: url(http://d30y9cdsu7xlg0.cloudfront.net/png/27587-84.png);}.map-marker {  width: 45px;  height: 45px;  background: #485F6E center no-repeat;  background-size: 80%;  position: relative;  z-index: 30;  cursor: pointer;}.map-marker:after {  position: absolute;  left: 50%;  bottom: -8px;  ;  width: 0;  height: 0;  border-left: 8px solid transparent;  border-right: 8px solid transparent;  border-top: 8px solid #485F6E;  content: " ";}.map-marker:hover {  background-color: #39c360;  transition: 0.3s background-color;}.map-marker:hover:after {  border-top-color: #39c360;  transition: 0.3s border-top-color;} 

Только не ругайтесь за мой корявый код.. Только начинаю..

Edited March 4, 2016 by PeterLS