Помогите, пожалуйста, объединить два JS. Первый служит для перемещения маркера по карте по внешней ссылке:
var marker;
var map;
$("#link1").click(function(){
changeMarkerPos(55.720932, 37.600693);
});
$("#link2").click(function(){
changeMarkerPos(3.165559, 101.612416);
});
function initialize() {
var styles = [{
stylers: [{
saturation: 0
}]
}];
var styledMap = new google.maps.StyledMapType(styles, {
name: "Styled Map"
});
var mapProp = {
center: new google.maps.LatLng(55.720932, 37.600693),
zoom: 17,
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: true,
streetViewControl: false,
overviewMapControl: false,
rotateControl: true,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style')
marker = new google.maps.Marker({
position: new google.maps.LatLng(55.720932, 37.600693),
animation: google.maps.Animation.DROP,
icon: 'http://mt.googleapis.com/vt/icon/name=icons/spotlight/spotlight-poi.png&scale=1',
});
marker.setMap(map);
map.panTo(marker.position);
}
function changeMarkerPos(lat, lon){
myLatLng = new google.maps.LatLng(lat, lon)
marker.setPosition(myLatLng);
map.panTo(myLatLng);
}
google.maps.event.addDomListener(window, 'load', initialize);
Второй служит для красивой анимации маркера:
CustomMarker.prototype = new google.maps.OverlayView();
function CustomMarker(opts) {
this.setValues(opts);
}
CustomMarker.prototype.draw = function() {
var self = this;
var div = this.div;
if (!div) {
div = this.div = $('' +
'<div>' +
'<div class="shadow"></div>' +
'<div class="pulse"></div>' +
'<div class="pin-wrap">' +
'<div class="pin"></div>' +
'</div>' +
'</div>' +
'')[0];
this.pinWrap = this.div.getElementsByClassName('pin-wrap');
this.pin = this.div.getElementsByClassName('pin');
this.pinShadow = this.div.getElementsByClassName('shadow');
div.style.position = 'absolute';
div.style.cursor = 'pointer';
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(self, "click", event);
});
}
var point = this.getProjection().fromLatLngToDivPixel(this.position);
if (point) {
div.style.left = point.x + 'px';
div.style.top = point.y + 'px';
}
};
CustomMarker.prototype.animateDrop = function() {
dynamics.stop(this.pinWrap);
dynamics.css(this.pinWrap, {
'transform': 'scaleY(2) translateY(-'+$('#map').outerHeight()+'px)',
'opacity': '1',
});
dynamics.animate(this.pinWrap, {
translateY: 0,
scaleY: 1.0,
}, {
type: dynamics.gravity,
duration: 1800,
});
dynamics.stop(this.pin);
dynamics.css(this.pin, {
'transform': 'none',
});
dynamics.animate(this.pin, {
scaleY: 0.8
}, {
type: dynamics.bounce,
duration: 1800,
bounciness: 600,
})
dynamics.stop(this.pinShadow);
dynamics.css(this.pinShadow, {
'transform': 'scale(0,0)',
});
dynamics.animate(this.pinShadow, {
scale: 1,
}, {
type: dynamics.gravity,
duration: 1800,
});
}
CustomMarker.prototype.animateBounce = function() {
dynamics.stop(this.pinWrap);
dynamics.css(this.pinWrap, {
'transform': 'none',
});
dynamics.animate(this.pinWrap, {
translateY: -30
}, {
type: dynamics.forceWithGravity,
bounciness: 0,
duration: 500,
delay: 150,
});
dynamics.stop(this.pin);
dynamics.css(this.pin, {
'transform': 'none',
});
dynamics.animate(this.pin, {
scaleY: 0.8
}, {
type: dynamics.bounce,
duration: 800,
bounciness: 0,
});
dynamics.animate(this.pin, {
scaleY: 0.8
}, {
type: dynamics.bounce,
duration: 800,
bounciness: 600,
delay: 650,
});
dynamics.stop(this.pinShadow);
dynamics.css(this.pinShadow, {
'transform': 'none',
});
dynamics.animate(this.pinShadow, {
scale: 0.6,
}, {
type: dynamics.forceWithGravity,
bounciness: 0,
duration: 500,
delay: 150,
});
}
CustomMarker.prototype.animateWobble = function() {
dynamics.stop(this.pinWrap);
dynamics.css(this.pinWrap, {
'transform': 'none',
});
dynamics.animate(this.pinWrap, {
rotateZ: -45,
}, {
type: dynamics.bounce,
duration: 1800,
});
dynamics.stop(this.pin);
dynamics.css(this.pin, {
'transform': 'none',
});
dynamics.animate(this.pin, {
scaleX: 0.8
}, {
type: dynamics.bounce,
duration: 800,
bounciness: 1800,
});
}
$(function() {
var pos = new google.maps.LatLng(42.9837, -81.2497);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: pos,
disableDefaultUI: true,
});
var marker = new CustomMarker({
position: pos,
map: map,
});
google.maps.event.addListener(marker, 'click', function(e) {
marker.animateWobble();
});
$('#drop').on('click', function(e) {
marker.animateDrop();
});
$('#wobble').on('click', function(e) {
marker.animateWobble();
});
$('#bounce').on('click', function(e) {
marker.animateBounce();
})
});
Можно ли сделать так, чтобы "link1, link2, link3, ..., link100500" (из первого скрипта) было равно = 'drop' (из второго). Или как можно по другому сделать?
Вот так вызывается ссылка на маркер первого скрипта:
<a id="link1" href=#>123</a>
Вот так вызывается ссылка (со всеми применимыми стилями) на маркер второго скрипта:
<ul class="animations">
<li><a href="#" id="drop">Drop</a>
</ul>
