[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>
<style>
            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;
                margin-left: -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;
            }
        </style>

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