JSFiddle - React, Tailwind, and code Playground

by devnigel

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<input type="button" value="rotate" onclick="updateMap(parseInt(document.getElementById('rotation').value));"/><input id="rotation" value="135" />
<div id="map"></div>

CSS

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

JavaScript

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: {
            url:"http://carpng.com/wp-content/uploads/thumb/hatchback-car-top-view-8138-0.png",
                // size: new google.maps.Size(16,16),
                //    anchor: new google.maps.Point(8,8),
                rotation: 90, // rotation is not working
                scale:1,
            anchor: new google.maps.Point(8,8)
        },
        
    });
}

function updateMap(bearing) {
    // var bearing = 135;
    
    console.log(bearing);
    var icon = marker.getIcon();
    icon.rotation = bearing;
    marker.setIcon(icon);
    
    console.log(marker);
}
function initialize() {
   initMap({ Latitude:37.4419, Longitude: -122.1419});
}
google.maps.event.addDomListener(window, "load", initialize);