Несколько HTML-маркеров на карте Google
Здравствуйте! Подскажите, пожалуйста, что не так делаю?.. Почему-то пишет что функция 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 маркер сделайте потом цикл пробуйте добавить |
Цитата:
|
рони,
заменил сомнительный, по вашим словам, 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, как то так ... далее сами дерзайте
<!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>
|
а чтобы перемещение по gps было видно? :write:
|
| Часовой пояс GMT +3, время: 20:38. |