CODEWITHSUNDEEP
google-maps-api-3
gleff
gleff

Reputation: 51

Google Maps v3 MarkerImage & jQuery.Rotate

I have the following code which is a custom icon on Google Maps V3. I want to rotate it using the jQuery.Rotate plugin.

var image = new google.maps.MarkerImage(
    "markers/test.png",
    new google.maps.Size(52, 52), // size
    new google.maps.Point(0, 0), // origin
    new google.maps.Point(20, 0) // anchor
);


marker = new google.maps.Marker(
{
    map: map,
    draggable: false,
    position: markerData[i].latLng,
    visible: true,
    icon: image,
    optimized: false
});

The problem is jQuery.Rotate is wanting the DOM id to identify the element to rotate.. Markerimage doesn't have one and I can't specify it.

Eg. 

<img src="img" id="image">
$("#image").rotate(15);

Can anyone show me some sample code that will allow me to either assign an id to the MarkerImage so that jQuery.Rotate can use it eg. #image assuming the id is id="image", or is there another way of telling jQuery.Rotate to use the MarkerImage rather than point to a DOM element?

Any help would be appreciated.. If I can't find an answer to this I'll need to create 360 versions of the same icon for every icon I use of which there are many. I prefer to use this particular plugin though. Hopefully there's an easy answer.

Upvotes: 3

Views: 1808

Answers (1)

RoyHB
RoyHB

Reputation: 1725

I can't provide an 'answer', just a hint and observation.

Assuming that your map is a DOM object called 'map', have a look at the DOM object map.l.innerContainer.outerHtml. (thats a lower case "l" - map.l)

In outerHtml, amongst many other divs, you should be able to find a div that contains the img file for your icon.

I've wanted to do the same thing as you, rotate icons on the fly, but I haven't yet found the time to see if I can organise a way to put an id on these divs to facilitate using jquery to rotate them. The divs are created by the api.

There are some DOM mutation events (like DOMNodeInsertedIntoDocument) described in the literature but evidently their implementation is unreliable / uneven and it sounds like they have been removed from the W3C spec. I haven't tried any of these yet so can't comment from personal experience.

In my case I just decided to create icon files for each cardinal direction, N NNE NE ENE etc. For my application that seems to get the icons aligned well enough to look ok.

If you succeed in your quest please share your solution here for others.

Upvotes: 1

Related Questions