JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

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>
http://jsfiddle.net/devnigel/Lay214fp/1/#tidy

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,
    optimized: false,
    title: "MY MARKER",
    icon: {
      url: "http://carpng.com/wp-content/uploads/thumb/hatchback-car-top-view-8138-0.png",
      anchor: new google.maps.Point(150, 150)
    }
  });
  var rotationAngle = 0;
  google.maps.event.addListenerOnce(map, 'idle', function() {
    setInterval(function() {
      $('img[src="http://carpng.com/wp-content/uploads/thumb/hatchback-car-top-view-8138-0.png"]').css({
        'transform': 'rotate(' + rotationAngle + 'deg)'
      });
      rotationAngle += 10;
    }, 5000);
  });
}

function updateMap(bearing) {
  $('img[src="http://carpng.com/wp-content/uploads/thumb/hatchback-car-top-view-8138-0.png"]').css({
    'transform': 'rotate(' + bearing + 'deg)'
  });
}

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