Ругается на вызываемую функцию (Google Maps API)?

Question

[Петр Слободянюк]

Здравствуйте! Подскажите, пожалуйста, что не так делаю?.. Почему-то пишет что функция setMap не определена!
Вот код на jsfiddle: https://jsfiddle.net/e539prnk/

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;
}

Подскажите где ошибка в коде, пожалуйста? А то уже второй день с этим бьюсь..

Answer 1

[rakro]

"Почему-то пишет что функция setMap не определена!". А где она объявляется?

Comments

[Петр Слободянюк]

Это Google API, я так понимаю она объявляется в подключаемом файле от Google. Я делал 1 маркер - все работало (codepen.io/anon/pen/jqPJwb?editors=0010), но как только добавил в цикл перестало.

[rakro]

Петр Слободянюк: конструктор и prototype нужно вынести из цикла. оставить только "var marker = new MapMarker(options[i]);". Вообще хорошо было бы создать страницу в jsfiddle, чтобы остальные могли попробовать исправить.

[Петр Слободянюк]

rakro: и MapMarker.prototype = new google.maps.OverlayView(); тоже убрать из цикла что ли? Я вот функцию убрал, вот так получилось: https://jsfiddle.net/e539prnk/

[Петр Слободянюк]

rakro: я сделал вот так: https://jsfiddle.net/e539prnk/1/
Работает, но теперь не могу разобраться с действием при клике.. Сейчас в консоль выводится id сразу всех маркеров.. А нужно чтобы определенного только.. Подскажите как сделать правильно?

[rakro]

Петр Слободянюк: "var markers = []" - это тоже из цикла вынеси.
Чтобы выводить id:
$(document).on('click', '.map-marker', function() {
console.log($(this).attr('id'));
});

[Петр Слободянюк]

rakro: спасибо. Все получилось!