Здравствуйте! Подскажите, пожалуйста, что не так делаю?.. Почему-то пишет что функция 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;} Только не ругайтесь за мой корявый код.. Только начинаю..
