Google maps icon rotation is always 200 degrees

Question

I have a bit of a strange problem attempting to rotate an icon to indicate a vehicle's location. My json contains the bearing of the vehicle and if the vehicle is moving then the bearing is passed into the movingVehicle object which is then used when the marker is created. The issue I have is that every marker is at 200 degrees. I have stepped through the code and see that the correct bearing is passed through as part of the icon properties, but after the script finishes and all the markers are drawn, they are all at 200 degrees.

Something obvious?

var map;
var markersArray = [];

var mapOptions = {
                    zoom: 8,
                    center: new google.maps.LatLng(52.68, -1.26),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var movingVehicle = {
                    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                    fillColor: "green",
                    fillOpacity: 1,
                    scale: 3,
                    strokeColor: "green",
                    strokeWeight: 1,
                    rotation:0
};

var staticVehicle = {
                    path: google.maps.SymbolPath.CIRCLE,
                    fillColor: "red",
                    fillOpacity: 1,
                    scale: 3,
                    strokeColor: "red",
                    strokeWeight: 5
};

function vehicleState(speed,bearing){
    if (speed){
        movingVehicle.rotation = bearing;
        return movingVehicle;
    }
    else
    {
        return staticVehicle;
    }
};

$(function(){
    map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);

    $.getJSON( PATH_TO_MY_JSON_WOULD_BE_HERE, function(data) { 
        $.each( data.vehicles, function(i, vehicle) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(vehicle.lat, vehicle.long),
                title:vehicle.vehicle,
                draggable: false,
                map: map,
                icon: vehicleState(vehicle.speed,vehicle.bearing)
            });
            markersArray.push(marker);
        });
    });

});

sample json

{"vehicle":"xxxxLCJ","time":"2013-01-25T18:33:19","lat":53.47766,"long":-2.335671,"speed":24.5562,"bearing":231},
{"vehicle":"xxxxLCN","time":"2013-01-25T15:07:36","lat":52.45257,"long":1.604016,"speed":36.4176,"bearing":138},
{"vehicle":"xxxxLCP","time":"2013-01-25T23:17:12","lat":53.24011,"long":-0.554743,"speed":0,"bearing":0},

OK, so now I have slept, I realise that the 200 is coming from the last rotation that was set. So, when the moving vehicle object is passed to gmaps its not used immediately, but later when all the icons are rendered. So, I need to understand a way to pass in the fixed properties for the icon and the per-vehicle rotation. — Snapey, Jan 26 '13 at 10:16
I was going to ask that (the last entry in your example wasn't 200). Sounds like the general problem that can be addressed with function closure (search for questions about infowindow content, like [this one](http://stackoverflow.com/questions/4897316/google-maps-api-v3-infowindow-all-infowindos-displaying-same-content)) — geocodezip, Jan 26 '13 at 17:45

score 0 · Answer 1 · answered Jan 27 '13 at 12:37

Not sure if this is the correct way to do this, but solved by cloning the object whilst deciding which icon to show.

    function Clone(x) {
       for(p in x)
       this[p] = (typeof(x[p]) == 'object')? new Clone(x[p]) : x[p];
    };

    function vehicleState(speed,bearing){
        if (speed){
            var icon = new Clone(movingVehicle);
            icon.rotation = bearing;
            return icon;
        }
        else
        {
            var icon = new Clone(staticVehicle);
            return icon;
        }
    };

Google maps icon rotation is always 200 degrees

1 Answers1