Googleマップapi v3で.gifイメージを回転しますか？

Question

この質問には多くの回答がありますが、マーカーがなく.gif画像を使用しているときはうまくいきません。私は.GIFを使用していない人のため//

var image = { 
    url: 'img/RedFlashYacht.gif', 
    size: new google.maps.Size(75, 75), 
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(0, 32), 
    scaledSize: new google.maps.Size(50, 50) 
}; 
marker = new google.maps.Marker({ 
    position: pos , 
    map: map, 
    icon: image, 
    store_id: mkrID, 
    optimized: false 
}); 

（働く）コードを使用した画像（ともアニメーションGIF）を.GIF使用するには、「最適化：偽」行は何

重要です私は今、gif画像を回転させたいと思っています（指定された角度で、アニメーションgifとして行うことができます）。 'store_id：mkrID'でイメージのIDを設定しているにもかかわらず、以前にvar mkrIDが作成されていて、marker.get（ 'store_id'）というコードで読み込むことができます。 document.getElementByIdで画像にアクセスできません。どのgoogle maps APIもサンプルコードを回転させることはできません。例はv2のようだが、Googleマップのマーカーに関連していて、gifを使ったカスタム画像ではない。

誰でもGoogleマップでgif画像を回転できましたか？

Answer 1

マーカーの「store_id」プロパティでは、イメージを含むDOM要素にアクセスできません。あなたは、各マーカーのためのユニークなアイコンを持っている場合、あなたはjQueryを使ってそのURLを使ってそれをつかむことができ、その後、CSSはそれに変換を適用します：

$('img[src="http://www.geocodezip.com/mapIcons/boat-10-64.gif"]').css({ 
    'transform': 'rotate(45deg)' 
}); 

注：これはのみoptimized: false

とマーカーのために動作します

• proof of concept fiddle
• proof of concept fiddle rotating a .png image

コードスニペット： `optimized`パラメータの

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.47949, -122.083168), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var image = { 
 
    url: 'http://www.geocodezip.com/mapIcons/boat-10-64.gif', 
 
    size: new google.maps.Size(75, 75), 
 
    origin: new google.maps.Point(0, 0), 
 
    anchor: new google.maps.Point(0, 32), 
 
    scaledSize: new google.maps.Size(50, 50) 
 
    }; 
 
    var marker = new google.maps.Marker({ 
 
    position: map.getCenter(), 
 
    map: map, 
 
    icon: image, 
 
    store_id: "mkrID", 
 
    optimized: false 
 
    }); 
 
    var rotationAngle = 10; 
 
    google.maps.event.addListenerOnce(map, 'idle', function() { 
 
    setInterval(function() { 
 
     $('img[src="http://www.geocodezip.com/mapIcons/boat-10-64.gif"]').css({ 
 
     'transform': 'rotate(' + rotationAngle + 'deg)' 
 
     }); 
 
     rotationAngle += 10; 
 
    }, 1000); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>