ビュー内にGoogleマップマーカーをドロップする

Googleマップマーカーをアニメーション化しようとしています。私はマップのスタイルを設定し、カスタムマーカーを設定してアニメーションを動作させましたが、私が望むように動作しないようにするいくつかのことがあります。ビュー内にGoogleマップマーカーをドロップする

最初に、pace.jsを使用してローディングバーをページに追加します。ページがロードされると、CSSは基本的なCSSトランジションでコンテンツをビューにフェードインします。このトランジションの継続時間は0.5秒であるため、アニメーションはページが完全に読み込まれる前に実行されます。だから基本的に私はマップマーカーのアニメーションに遅延を追加する方法が必要です。

私は、私の地図をウェブサイトのフッタの近くに置くことを考えています。つまり、誰もアニメーションを見ることはできません。私はマップが表示されている（そしてページが読み込まれている）ときにアニメーション化するだけでいいと思った。

これを達成する方法はありますか？読んでうまくいけば、誰かがこれで私を助けることができる時間を割いて

/* 
* When the window has finished loading create our google map below. 
*/ 

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

/* 
* Basic options for a simple Google Map. For more options see: 
* https://developers.google.com/maps/documentation/javascript/reference#MapOptions 
* 
* 1. How zoomed in you want the map to start at (always required) 
* 2. The latitude and longitude to center the map (always required). 
* 3. How you would like to style the map. This is where you would paste any 
* style found on Snazzy Maps. 
* 4. Prevent map from being draggable. 
* 5. Hide map/satellite toggle. 
* 6. Hide "Street View" button. 
*/ 

function init() { 

    var mapOptions = { 
     zoom: 15, /* [1] */ 
     center: new google.maps.LatLng(LATVALUE, LONGVALUE), /* [2] */ 
     draggable: false, /* [4] */ 
     mapTypeControl: false, /* [5] */ 
     streetViewControl: false, /* [6] */ 
     styles: /* [3] */ 
      [{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"all","elementType":"geometry.fill","stylers":[{"weight":"2.00"}]},{"featureType":"all","elementType":"geometry.stroke","stylers":[{"color":"#9c9c9c"}]},{"featureType":"all","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#eeeeee"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#7b7b7b"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"fill","stylers":[{"weight":"1.00"}]},{"featureType":"transit","elementType":"labels.icon","stylers":[{"visibility":"on"},{"hue":"#a3cd39"},{"gamma":1},{"saturation":"50"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#c8d7d4"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#070707"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]}] 
    }; 

    /* 
    * Get the HTML DOM element that will contain your map. We are using a div with 
    * id="map" seen below in the <body> 
    */ 

    var mapElement = document.getElementById('map'); 

    /* 
    * Create the Google Map using our element and options defined above. 
    * 
    * 1. Map varible. 
    * 2. Marker variable so we can specify a retina image and resize. 
    */ 

    var map = new google.maps.Map(mapElement, mapOptions); /* [1] */ 
    var mapIcon = new google.maps.MarkerImage("img/interface/[email protected]", null, null, null, new google.maps.Size(100,78)); /* [2] */ 

    /* 
    * Let's also add a marker while we're at it. 
    */ 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(LATVALUE, LONGVALUE), 
     map: map, 
     flat: true, 
     title: 'COMPANY NAME', 
     icon: mapIcon, 
     animation: google.maps.Animation.DROP 
    }); 
}

ありがとう：

はここに私の現在のコードです！ :)

出典

2017-02-16 user1406440

this answerをご覧ください。 Waypointsを使用すると、フッターが表示されたときに関数をトリガーできます。一度トリガーされた関数はマーカーを選択し、cssトランジションを含むクラスをクラスに追加します。

var waypoint = new Waypoint({ 
    element: $([selector for footer]), 
    handler: function() { 
    $([selector for marker]).addClass([class containing css transition]); 
    } 
});

要素はは、その要素のトップは、ビューポートの上部に当たったときにトリガする機能であるウェイポイントそのDOM要素のスクロール中に観察する位置、およびハンドラに伝えます。

出典

2017-02-16 14:56:45

私はウェイポイントの使用を考えていましたが、どのようにマーカーにIDを付けるかについてはわかりません。 javascriptで使用する画像を指定できますが、GoogleマップAPIがすべてのマークアップを挿入するように見えます。 – user1406440

GoogleマップマーカーにIDを追加する点でこれを確認してください[回答]（http://stackoverflow.com/a/3265918/7172409）。 –

ビュー内にGoogleマップマーカーをドロップする

答えて

関連する問題