Несколько 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>
<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>

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

[рони]

PeterLS,
30 строка вызывает вопросы ... вы сначала 1 маркер сделайте потом цикл пробуйте добавить

[PeterLS]

PeterLS,
30 строка вызывает вопросы ... вы сначала 1 маркер сделайте потом цикл пробуйте добавить

1 маркер я уже сделал. Вот он: http://codepen.io/anon/pen/jqPJwb?editors=0010

[PeterLS]

рони,
заменил сомнительный, по вашим словам, for на forEach:

options.forEach(function(option) {
                    
                    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(option);
                    
                    //действие при клике
                    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';
                        }
                    };
                });

[рони]

заменил сомнительный, по вашим словам

хоть на чего меняйте ваш цикл в игре не учавствует

[PeterLS]

хоть на чего меняйте ваш цикл в игре не учавствует

Ну а в чем проблема то тогда, подскажите, будьте уж так добры?

[рони]

PeterLS, как то так ... далее сами дерзайте

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
body {
  margin: 0;
}
#map-canvas {
  width: 100%;
  height: 100vh;
  margin: auto;
}
.map-marker.running {
  background-image: url(//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>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
  <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(42.4924, -92.3427778);
  var mapOptions = {
    zoom: 14,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  var markers = [];
  var arr = [{a : 42.4924, b : -92.3427778,title : 'первый'}, {a : 42.50, b : -92.3427778, title : 'второй'}];
  arr.forEach(function(el, i) {
  var myLatlng = new google.maps.LatLng(el.a, el.b);
  var options = {
    map: map,
    position: myLatlng,
    className: 'map-marker running',
    visible: true ,
    title: el.title

  }
  var marker = new google.maps.Marker(options);
  google.maps.event.addListener(marker, 'click', function() {
        map.panTo(myLatlng);
    });
  markers[i] = marker;
})


};
google.maps.event.addDomListener(window, 'load', initialize);

  </script>
</head>

<body>
<div id="map-canvas"></div>

</body>

</html>

[leon2009sp]

а чтобы перемещение по gps было видно?