カスタムGoogleマップマーカ/ドロップアニメーションを使用したJavascript

Question

私はJSの初心者ですが、カスタムマップを作成したいと考えていました。私は地図をレンダリングする2つのスクリプトに取り組んだ：One with the drop animation (maptest1)、one with the custom markers (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

If anyone is wondering, using Ryan's additions to the script here it working currently.

Answer 1

あなたがaddMarker（内maptest1.htmlするためにこれを追加することができます）

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, 
    shadow: shadow, 
    icon: image, 
    shape: shape, 
    })); 

：これまで

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

を。