Autorotate Is Not Working For Google Map Created Using Google Maps Api

I have create a map now the map has to rotated in order to make it more nicer to see i tried the example from https://developers.google.com/maps/documentation/javascript/examples/a

Solution 1:

You are getting the javascript error: Uncaught ReferenceError: autoRotate is not defined because the autoRotate function is local to the onload function. It needs to be in the global scope to use it for a HTML onclick function.

This removes the error, but aerial tiles are not available at that location.

code snippet:

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 colorVariable = ["green", "blue", "yellow", "rose"];
var map;

functionautoRotate() {
  // Determine if we're showing aerial imagery.if (map.getTilt() !== 0) {
    window.setInterval(rotate90);
  }
}
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);

  functionrotate90() {
    var heading = map.getHeading() || 0;
    map.setHeading(heading + 90);
  }


  var infoWindow = new google.maps.InfoWindow();
  var lat_lng = newArray();
  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,
      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);
  }
  map.setCenter(latlngbounds.getCenter());
  map.fitBounds(latlngbounds);

  //***********ROUTING****************////Set the Path Stroke Color/* var poly = new google.maps.Polyline({
           map: map,
           strokeColor: 'red'
           });*///Loop and Draw Path Route between the Points on MAPfor (var i = 0; i < lat_lng.length; i++) {
    if ((i + 1) < lat_lng.length) {
      var src = lat_lng[i];
      var des = lat_lng[i + 1];
      getDirections(src, des, colorVariable[i], map);
    }
  }
}

functiongetDirections(src, des, color, map) {
  //Intialize the Direction Servicevar service = new google.maps.DirectionsService();
  service.route({
    origin: src,
    destination: des,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  }, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      //Intialize the Path Arrayvar path = [];
      for (var i = 0; i < result.routes[0].overview_path.length; i++) {
        path.push(result.routes[0].overview_path[i]);
      }
      //Set the Path Stroke Colorvar polyOptions = {
        strokeColor: color,
        strokeOpacity: 1.0,
        strokeWeight: 8,
        path: path,
        map: map
      }
      poly = new google.maps.Polyline(polyOptions);
      poly.setMap(map);

    }
  });
}

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;
}

<scriptsrc="https://maps.googleapis.com/maps/api/js"></script><divid="floating-panel"><inputtype="button"value="Auto Rotate"onclick="autoRotate();"></div><divid="dvMap"></div>