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>
<script src="https://cdn.rawgit.com/wilq32/jqueryrotate/master/jQueryRotate.js"></script>
<div id="info"></div>
<div id="map_canvas"></div>

CSS

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

JavaScript

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.47949,-122.083168),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    google.maps.event.addListener(map,'click',function(evt) {
      document.getElementById('info').innerHTML = evt.latLng.toUrlValue(6);
    })
  var image = {
    url: 'http://www.geocodezip.com/mapIcons/boat-10-64.gif',
    size: new google.maps.Size(75, 75),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 32),
    scaledSize: new google.maps.Size(50, 50)
  };
  marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    icon: image,
    store_id: "mkrID",
    optimized: false
  });
  var rotationAngle = 10;
  google.maps.event.addListenerOnce(map, 'idle', function() {
    setInterval(function(){
    $('img[src="http://www.geocodezip.com/mapIcons/boat-10-64.gif"]').css({
      'transform': 'rotate('+rotationAngle+'deg)'
    });
    rotationAngle += 10;
    }, 1000);
    /* var result = $("img[src='http://www.geocodezip.com/mapIcons/boat-10-64.gif']")[0].rotate(90); */
  });
}
google.maps.event.addDomListener(window, "load", initialize);