Rotating MarkerWithLabel using webkit Transform

Question

I'm using MarkerWithLabel to create markers on a Google map, but I want to be able to rotate the marker icon so I'm experimenting with webkit etc. transform operations.

So far I have the following:

    var pictureLabel = document.createElement("img");
    pictureLabel.src = "helloworld.gif";

    rotateImage( pictureLabel, 20 );

        var myLatlng = new google.maps.LatLng(40,-10);

       marker = new MarkerWithLabel({
            position: myLatlng,
            labelContent: pictureLabel,
            icon: " "
        });

        marker.setMap(map);


function rotateImage( el, angle )
{
    rottext = "rotate(" + angle + "deg)";

    el.style.webkitTransform = '"' + rottext + '"';
    el.style.MozTransform = '"' + rottext + '"';
    el.style.msTransform = '"' + rottext + '"';
    el.style.OTransform = '"' + rottext + '"';
    el.style.transform = '"' + rottext + '"';
    el.style.transformOrigin = "50% 50%";
}

This produces no icon and I can't understand why. The problem must be in the function as, when I comment it out I get the icon displayed - just not rotated of course. Can anyone suggest what is wrong?

Related question: [rotate a .gif image on google maps api v3?](http://stackoverflow.com/questions/38723573/rotate-a-gif-image-on-google-maps-api-v3) — geocodezip, Dec 11 '16 at 16:31
I've done a bit of experimentation, with no luck: pictureLabel.setAttribute("id", "HelloImage"); rotateImage( "HelloImage", 50 ); And in the function call, I have the first argument being "HelloImage" and within, I have document.getElementById(el).style.webkitTransform = rottext; and for all the other calls therein. It still doesn't work though. — user3713442, Dec 11 '16 at 22:15

score 0 · Answer 1 · answered Dec 12 '16 at 21:14

The assignment like this:

el.style.webkitTransform = '"' + rottext + '"';

is invalid since the proper format for webkitTransform property is rotate(30deg) but not "rotate(30deg)"

Having said that replace rotateImage functiion with:

function rotateImage(el, angle) {
    rottext = "rotate(" + angle + "deg)";

    el.style.webkitTransform = rottext;
    el.style.MozTransform = rottext;
    el.style.msTransform = rottext;
    el.style.OTransform = rottext;
    el.style.transform = rottext;
    el.style.transformOrigin = "50% 50%";
}

Demo

function initMap() {
    var latLng = new google.maps.LatLng(49.47805, -123.84716);
    var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 12,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var pictureLabel = document.createElement("img");
    pictureLabel.id = "customMarker1";
    pictureLabel.src = "https://github.com/googlemaps/v3-utility-library/raw/master/markerwithlabel/examples/home.jpg";
    var marker = new MarkerWithLabel({
        position: homeLatLng,
        map: map,
        draggable: true,
        raiseOnDrag: true,
        labelContent: pictureLabel,
        labelAnchor: new google.maps.Point(50, 0),
        labelClass: "labels", // the CSS class for the label
    });
   var startAngle = 10;

    document.getElementById("btnRotate").addEventListener("click", function (event) {
        var m = document.getElementById("customMarker1");
        rotateImage(m,startAngle);
        startAngle+=30;
    });
}
function log(h) {
    document.getElementById("log").innerHTML += h + "<br />";
}






function rotateImage(el, angle) {
    rottext = "rotate(" + angle + "deg)";

    el.style.webkitTransform = rottext;
    el.style.MozTransform = rottext;
    el.style.msTransform = rottext;
    el.style.OTransform = rottext;
    el.style.transform = rottext;
    el.style.transformOrigin = "50% 50%";
}


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

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
 <script type="text/javascript" src="https://rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>

<button id="btnRotate">Rotate</button>
 <div id="map_canvas" style="height: 400px; width: 100%;"></div>
 <div id="log"></div>

Thank you - I'm still having problems - it is now saying that el in the function call is null, and I don't see how that is. It must be something simple but I can't see what. — user3713442, Dec 12 '16 at 22:24
It looks like, outside the , pictureLabel is going out of scope, even when I declare it as a var outside the initMap() function. What I'm trying to do ultimately is do a setInterval() function call within the ; periodically, the rotation angle will be recalculated and this will show on the map. But I can't do that because when I try to do document.getElementById("customMarker1"); the returned ID is null - but if I use your method of calling it via a button click, it isn't null. — user3713442, Dec 12 '16 at 23:53
In my example the Id property is getting assigned for image element, see pictureLabel.id — Vadim Gremyachev, Dec 13 '16 at 07:17
Hi, I've tried m = pictureLabel.id; rotateImage(m ,60); but it seems that, in the body of the document, "rotateImage(m ,60);" - this is even when pictureLabel is defined as global in the head. — user3713442, Dec 13 '16 at 14:06

Rotating MarkerWithLabel using webkit Transform

1 Answers1