Лично я не использую ни один из пользовательских скриптов наложения Google и тому подобное. Я создал пользовательскую страницу php, которая содержит iframe, где я могу загружать пользовательские файлы css, а также я создаю собственные DIV, которые перемещаются поверх карты, которые затем перемещаются при перетаскивании при открытии.
Вы можете использовать события Drag, Dragstart, Dragend, чтобы помочь вам изменить положение созданных вами элементов.
Если на вашей странице установлены пользовательские маркеры, вы можете получить их положение в пикселях с помощью этой функции:
getPosition: function (marker) {
var map = this.map /* Your map, in my case is part of my controller object linked to this.map */;
var scale = Math.pow(2, map.getZoom());
var nw = new google.maps.LatLng(
map.getBounds().getNorthEast().lat(),
map.getBounds().getSouthWest().lng()
);
var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
var pixelOffset = new google.maps.Point(
Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
);
return pixelOffset; /* Returns the top left pixel of the specified marker on the specified map */
}
А затем я использую функцию setPosition, которая используется при перетаскивании окна, она устанавливает позицию вашего пользовательского элемента в положение маркера.
Событие перетаскивания может быть установлено таким образом:
google.maps.addEventListener (map, 'drag', function () {setPosition (marker, element);});
Функция setPosition просто собирает ширину, высоту элемента и смещение пикселя, связанное с маркером, используя функцию getPosition (marker):
setPosition: function (marker,element) {
var p = this.getPosition(marker),
s = {width:element.offsetWidth,height:element.offsetHeight},
markerOffset = {width:58,height:58};
element.style.left = p.x - (s.width/2) + (markerOffset.width/2) + "px"; /* We set the element's left position to the marker's position + half of our element's width + half of the marker's width's so it is centered */
element.style.top = p.y - s.height - (markerOffset.height) + 10 + "px"; /* We set the element's top position to the marker's position + our element's height + markers height so it is 10px above our marker vertically */
},
Иногда нужно просто думать немного нестандартно