Map Rotation Test

by Abid Shaik

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="dvMap"></div>

CSS

html,
body,
#dvMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

JavaScript

var markers = [{
  "title": 'point4',
  "lat": '1.355333',
  "lng": '103.987305',
  "description": 'uuu'
}, {
  "title": 'point3',
  "lat": '1.354432',
  "lng": '103.987262',
  "description": 'zzz'
}, {
  "title": 'point3',
  "lat": '1.353199',
  "lng": '103.986908',
  "description": 'zzz'
}];
var gmarkers = [];
var colorVariable = ["green", "blue", "yellow", "rose"];
var map;
var degree = 0;
function autoRotate() {
    var $elie = $("#dvMap");
    degree = degree + 65;
    rotate(degree);
    function rotate(degree) {        
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});                      
        /* timer = setTimeout(function() {
            rotate(++degree);
        },5); */
        for (var i= 0; i < gmarkers.length; i++) {
            gmarkers[i].setIcon(pinSymbol("red", -degree));
        }
     }
} 
window.onload = function() {
  var mapOptions = {
    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    heading: 90,
    tilt: 45
  };

  map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
    
  var infoWindow = new google.maps.InfoWindow();
  var lat_lng = new Array();
  var latlngbounds = new google.maps.LatLngBounds();
  for (i = 0; i < markers.length; i++) {
    var data = markers[i]
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    lat_lng.push(myLatlng);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      icon:  pinSymbol('red', 0), // "http://maps.google.com/mapfiles/ms/micons/red-dot.png",
      title: data.title
    });
    latlngbounds.extend(marker.position);
    (function(marker, data) {
      google.maps.event.addListener(marker, "click", function(e) {
        infoWindow.setContent(data.description);
        infoWindow.open(map, marker);
      });
    })(marker, data);
      gmarkers.push(marker);
 ...