How to combine two JS?

Please help to combine two JS. The first is to move the marker on the map at the external link:

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);
}

changeMarkerPos function(lat, lon){
 myLatLng = new google.maps.LatLng(lat, lon)
marker.setPosition(myLatLng);
map.panTo(myLatLng);
}

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


The second is for a beautiful animation of a marker:

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();
})
});


Is it possible to make "link1, link2, link3, ..., link100500" (from the first script) was equal to = 'drop' (from the second). Or how to do differently?

So called link to the first token of the script:
<a id="link1" href="#">123</a>

So called link (with all applicable styles) on the marker of the second script:
<ul class="animations">
 the <li><a href="#" id="drop">Drop</a>
 </li></ul>
July 9th 19 at 11:02
2 answers
July 9th 19 at 11:04
Solution
So you can combine plunkr
you need to animation and "there" "here" was in one piece - dannie commented on July 9th 19 at 11:07
: I don't understand what it means to one, show an example - brooks.Greenfelder commented on July 9th 19 at 11:10
: Added drop during the transition, view - brooks.Greenfelder commented on July 9th 19 at 11:13
Just leave one drop. mmmm. Old link, no drop =(

https://codepen.io/hlopka/pen/wWvvmY first
https://codepen.io/hlopka/pen/JKjjxW second

Sorry. Could not pay, went home - dannie commented on July 9th 19 at 11:16
: https://plnkr.co/edit/3g2WdJoRbGZXu7FmruhR?p=preview - brooks.Greenfelder commented on July 9th 19 at 11:19
: EVEN FIRE! Thank you very much! Sorry for the drop just not work out) the idea from above should fall but anything is great! - dannie commented on July 9th 19 at 11:22
: https://plnkr.co/edit/3g2WdJoRbGZXu7FmruhR?p=preview I have updated - brooks.Greenfelder commented on July 9th 19 at 11:25
: Holy scripters! Thank you very much! - dannie commented on July 9th 19 at 11:28
: Had to bonapeti a little bit. Do not tell me how to implement the additional div when clicked to appear on the map (left to the right, not the essence, I would be able to finish what you need) , I would have wrote the address, phone number, things like that? - dannie commented on July 9th 19 at 11:31
codepen.io/hlopka/pen/dXyGMm and do not tell me the error here? Why may not operate the third link? - dannie commented on July 9th 19 at 11:34
Have LIPOSTABIL bars)) that's a lot of links will have to do! But nothing! Most importantly you have given path))) - dannie commented on July 9th 19 at 11:37
: codepen.io/anon/pen/MeWjOb look at this example. I suggest you not to produce id-shnik of the links (link1, link2, link3 ... link1000), and to declare the transition point declaratively in html. Then click, you can easily write once and then just add new links with coordinates - brooks.Greenfelder commented on July 9th 19 at 11:40
: Oh! thank you! did not know that this is possible) - dannie commented on July 9th 19 at 11:43
: Alexey, can you one more question to ask? :) - dannie commented on July 9th 19 at 11:46
: what kind of question is that? - brooks.Greenfelder commented on July 9th 19 at 11:49
: And I already rivet tut :) How to open div on clicking the link? - dannie commented on July 9th 19 at 11:52
July 9th 19 at 11:06
ID try to change the same for all links class - in html and js. If that doesn't work, put everything in codepen.io and send the link.
I can't do that. I have a token for each separate ID (link1, link2, etc.) in the first case. How can I bind then? - dannie commented on July 9th 19 at 11:09
add class and manipulate them via this class - brooks.Greenfelder commented on July 9th 19 at 11:12

Find more questions by tags JavaScript