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/googlemaps/v3-utility-library/fb56a0dc/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas"></div>
<img src="http://www.geocodezip.com/mapIcons/SO_20170123_svgMarker.svg" />

CSS

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

.mapLabels {
  color: "white"
}

JavaScript

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  marker = new MarkerWithLabel({
    position: map.getCenter(),
    map: map,
    icon: {
      url: "http://www.geocodezip.com/mapIcons/SO_20170130_multiplePaths.svg",
      anchor: new google.maps.Point(62.5, 37),
    },
    labelContent: "27",
    labelAnchor: new google.maps.Point(10, 8),
    labelClass: "mapLabels", // the CSS class for the label
    labelStyle: {
      opacity: 0.8,
      color: "white"
    },
  });
    var rotationAngle = 10;
  google.maps.event.addListenerOnce(map, 'idle', function() {
    setInterval(function() {
      $('img[src="http://www.geocodezip.com/mapIcons/SO_20170130_multiplePaths.svg"]').css({
        'transform': 'rotate(' + rotationAngle + 'deg)'
      });
      rotationAngle += 10;
    }, 1000);
  });
}
google.maps.event.addDomListener(window, "load", initialize);