I posted a question yesterday which was resolved by a typographical correction, but now I have a problem which is baffling me.

I have a custom marker on a map, using a symbol as the icon so that I can rotate it. When I initialise it I set rotation to be 0, and at some point will call the updateMap() function which should give the marker a new rotation value. And it does, I'm able to see by printing the marker and its icon in the console that the rotation has changed, but the marker remains staunchly pointed north.

Here's my code for initialising and rotating the marker:

var map;
var marker;

function initMap(position) {
    var map_div = document.getElementById("map");
    map = new google.maps.Map(map_div, {
        zoom: 14,
        center: { lat: position.Latitude, lng: position.Longitude },
        mapTypeId: 'terrain'
    });
    marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map,
        title: "MY MARKER",
        icon: {
            path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
            scale: 4,
            strokeColor: '#00F',
            rotation: 0,
        }
    });
}

function updateMap() {
    var bearing = 135;
    console.log(bearing);
    marker.icon.rotation = bearing;
    console.log(marker);
}

The console tells me that the rotation of the marker has changed but the marker itself does not change direction.

Things I have tried:

• Triggering a resize event at the end of the update map function

• Not specifying an original rotation for the icon

• Switching the rotations, so starting at 135 and trying to change to 0 (the value of the marker's rotation at marker.icon.rotation after calling updateMap() bees 0 but the actual marker keeps pointing at 135)

• Changing the rotation right at the end of the initMap() function - this does work, which leads me to believe that there's something not right about the updateMap() function. I can't figure out what though, it still executes the function. Logging the marker in the global scope also tells me that the rotation has changed.

Any ideas or suggestions are wele.

I posted a question yesterday which was resolved by a typographical correction, but now I have a problem which is baffling me.

I have a custom marker on a map, using a symbol as the icon so that I can rotate it. When I initialise it I set rotation to be 0, and at some point will call the updateMap() function which should give the marker a new rotation value. And it does, I'm able to see by printing the marker and its icon in the console that the rotation has changed, but the marker remains staunchly pointed north.

Here's my code for initialising and rotating the marker:

var map;
var marker;

function initMap(position) {
    var map_div = document.getElementById("map");
    map = new google.maps.Map(map_div, {
        zoom: 14,
        center: { lat: position.Latitude, lng: position.Longitude },
        mapTypeId: 'terrain'
    });
    marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map,
        title: "MY MARKER",
        icon: {
            path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
            scale: 4,
            strokeColor: '#00F',
            rotation: 0,
        }
    });
}

function updateMap() {
    var bearing = 135;
    console.log(bearing);
    marker.icon.rotation = bearing;
    console.log(marker);
}

The console tells me that the rotation of the marker has changed but the marker itself does not change direction.

Things I have tried:

• Triggering a resize event at the end of the update map function

• Not specifying an original rotation for the icon

• Switching the rotations, so starting at 135 and trying to change to 0 (the value of the marker's rotation at marker.icon.rotation after calling updateMap() bees 0 but the actual marker keeps pointing at 135)

• Changing the rotation right at the end of the initMap() function - this does work, which leads me to believe that there's something not right about the updateMap() function. I can't figure out what though, it still executes the function. Logging the marker in the global scope also tells me that the rotation has changed.

Any ideas or suggestions are wele.

• javascript
• google-maps-api-3

2 Answers 2

There is no documented icon property of a google.maps.Marker object (while it may "work", using undocumented properties is not remended). Use the documented setters and getters to get the value, change it, then set it again:

function updateMap() {
    var bearing = 135;
    console.log(bearing);
    var icon = marker.getIcon();
    icon.rotation = bearing;
    marker.setIcon(icon);
    console.log(marker);
}

proof of concept fiddle

code snippet:

var map;
var marker;

function initMap(position) {
  var map_div = document.getElementById("map");
  map = new google.maps.Map(map_div, {
    zoom: 14,
    center: {
      lat: position.Latitude,
      lng: position.Longitude
    },
    mapTypeId: 'terrain'
  });
  marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    title: "MY MARKER",
    icon: {
      path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
      scale: 4,
      strokeColor: '#00F',
      rotation: 0,
    }
  });
}

function updateMap(bearing) {
  var icon = marker.getIcon();
  icon.rotation = bearing;
  marker.setIcon(icon);
}

function initialize() {
  initMap({
    Latitude: 37.4419,
    Longitude: -122.1419
  });
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis./maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="button" value="rotate" onclick="updateMap(parseInt(document.getElementById('rotation').value));" /><input id="rotation" value="135" />
<div id="map"></div>

you can just change updateMap function to:

function updateMap() {
  var bearing = 135;
  console.log(marker.icon);
  marker.icon.rotation = bearing;
  marker.setMap(map);
  console.log(marker.icon);
}

marker.setMap(map); re-adds to the map after the options are updated

JSFiddle : https://jsfiddle/q3wjrpdw/8/