Javascript с пользовательскими маркерами Google Map / анимацией отбрасывания

Question

Я очень новичок в JS, но я надеялся заставить работать собственную карту. Я работал над двумя сценариями, отображающими карту: Один с анимацией отбрасывания (maptest1) , Один с пользовательскими маркерами (maptest2) .

По отдельности, они оба отлично работают, но я не могу понять, как добиться анимации И пользовательского маркера. Я знаю, что функции drop и addMarker выполняют анимацию в maptest1 . Я пытался интегрировать эти функции с моим кодом в maptest2 , но я не могу заставить его работать.

Любое понимание будет высоко ценится!

maptest1: (анимация выпадения)

var locations = [
  new google.maps.LatLng(47.578033, -122.288116, 1),
  new google.maps.LatLng(47.675625, -122.304115, 2),
  new google.maps.LatLng(47.681580, -122.355278, 3)
];
var markers = [];
var iterator = 0;
function initialize() {
  drop();
  var mapOptions = {
    zoom: 12,
    panControl: false,
    zoomControl: true,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(47.63,-122.33),
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
          mapOptions);
}
function drop() {
  for (var i = 0; i < locations.length; i++) {
    setTimeout(function() {
      addMarker();
    }, i * 200);
  }
}
function addMarker() {
  markers.push(new google.maps.Marker({
    position: locations[iterator],
    map: map,
    draggable: false,
    animation: google.maps.Animation.DROP
  }));
  iterator++;
}

maptest2: (пользовательские маркеры)

function initialize() {
  var mapOptions = {
    zoom: 12,
    panControl: false,
    zoomControl: true,
    scaleControl: false,
    streetViewControl: false,
   overviewMapControl: false,
    center: new google.maps.LatLng(47.63,-122.33),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
  setMarkers(map, studios);
}
var studios = [
  ['Mount Baker', 47.578033, -122.288116, 3],
  ['Ravenna', 47.675625, -122.304115, 2],
  ['Phinney', 47.681580, -122.355278, 1]
];

function setMarkers(map, locations) {
  var image = new google.maps.MarkerImage('mapimages/image.png',
      new google.maps.Size(30, 52),
      new google.maps.Point(0,0),
      new google.maps.Point(15, 52));
  var shadow = new google.maps.MarkerImage('mapimages/shadow.png',
      new google.maps.Size(60, 52),
      new google.maps.Point(0,0),
      new google.maps.Point(15, 52));
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var studio = locations[i];
    var myLatLng = new google.maps.LatLng(studio[1], studio[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: studio[0],
        zIndex: studio[3]
    });
  }
}

EDIT

Если кому-то интересно, используя дополнения Райана к скрипту, здесь он работает в настоящее время.

Answer 1

Вы можете добавить это в maptest1.html внутри addMarker ()

var image = new google.maps.MarkerImage('mapimages/image.png',
    new google.maps.Size(30, 52),
    new google.maps.Point(0,0),
    new google.maps.Point(15, 52));
var shadow = new google.maps.MarkerImage('mapimages/shadow.png',
    new google.maps.Size(60, 52),
    new google.maps.Point(0,0),
    new google.maps.Point(15, 52));
var shape = {
    coord: [1, 1, 1, 20, 18, 20, 18 , 1],
    type: 'poly'
};

и изменить это:

markers.push(new google.maps.Marker({
    position: locations[iterator],
    map: map,
    draggable: false,
    animation: google.maps.Animation.DROP
  }));

на следующее:

markers.push(new google.maps.Marker({
    position: locations[iterator],
    map: map,
    draggable: false,
    animation: google.maps.Animation.DROP,
    shadow: shadow,
    icon: image,
    shape: shape,
  }));

I думаю , что сработает.