Map Marker does not update position when directions are added to the map

[Jonny Carter]

I have a map that starts off showing a single marker for a location. I have a button on the page that calls a getDirections() function on my element, which attaches a google-map-directions element to the map. The directions run from a static location to the element's location. The directions add just fine, but the old marker stays in the center of the map, even though the map changes position to show the directions.

Even if I manually update the marker's position, it stays right where it is.

<dom-module id="my-map">
    <template>
        <google-map
            map="{{map}}"
            api-key=""
            signed_in="false"
            latitude="{{latitude}}"
            longitude="{{longitude}}"
            scrollwheel="false"
            disable-default-ui
            zoom="{{zoom}}"
            >
            <google-map-marker 
                map="{{map}}"
                icon={{dropPin}}
                latitude="{{latitude}}"
                longitude="{{longitude}}">
            </google-map-marker>
        </google-map>
        <google-map-directions 
            api-key=""
            start-address="{{startingLatLng}}"
            end-address="{{latLng}}"
            travel-mode="WALKING" >
        </google-map-directions>
    </template>
    <script>
        Polymer({
            is: 'my-map',
            attached: function() {
                this.$$('google-map-directions').rendererOptions = {
                    markerOptions: {
                        icon: this.mapMarker
                    }
                };
                this.latLng = { lat: this.latitude, lng: this.longitude };
                this.startingLatLng = { lat: this.startLatitude, lng: this.startLongitude };
            },
            getDirections: function () {
                var marker = document.querySelector('google-map-marker');
                var dirs = document.querySelector('google-map-directions');
                dirs.map = this.map;
                console.log(marker);
                marker.map = null;
                marker.marker.setPosition(this.latLng);
                console.log(this.latLng);
                marker.map = this.map;
            },
            properties: {
                latitude: {
                    type: Number
                },
                longitude: {
                    type: Number
                },
                latLng: {
                    type: Object
                },
                startLatitude: {
                    type: Number,
                    value: 111
                },
                startLongitude: {
                    type: Number,
                    value: 111
                },
                startingLatLng: {
                    type: Object
                },
                zoom : {
                    type: Number,
                    value: 18
                },
                mapMarker : {
                    type: String,
                    value: "icons/map-marker.svg"
                },
                dropPin : {
                    type: String,
                    value: "icons/map-drop-pin.svg"
                }
            }
        });
    </script>

I've also tried using the this.$$('queryselectr') syntax to get the marker, with no luck.

                var marker = this.$$('google-map-marker');
                var dirs = this.$$('google-map-directions');