Google maps: change from map view to satellite view

Question

I have a google map with javascript and i want after zoom in 100%,(full zoom) change the mode map from map view to satellite view, how done it in following javascript code?

DEMO:http://jsfiddle.net/keL4L2h0/

Answer 1

If the current zoom level is greater than or equal to the maximum zoom level of the ROADMAP MapType, change the mapType to SATELLITE:

google.maps.event.addListener(map, 'zoom_changed', function () {
    var maptype = map.getMapTypeId();
    if (map.getZoom() >= map.mapTypes[maptype].maxZoom) {
        if (map.getMapTypeId() != google.maps.MapTypeId.HYBRID) {
            map.setMapTypeId(google.maps.MapTypeId.HYBRID)
            map.setTilt(0); // disable 45 degree imagery
        }
    }
});;

updated fiddle

code snippet:

//////// Loading Google Map //////////////////
$(function() {
  var latitude = $('input[name="latitude"]').val();
  var longitude = $('input[name="longitude"]').val();
  var lat = (latitude ? latitude : 38.341656192795924),
    lng = (longitude ? longitude : -122.68604278564453),
    latlng = new google.maps.LatLng(lat, lng),
    image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';

  var mapOptions = {
    center: new google.maps.LatLng(lat, lng),
    zoom: (latitude ? 16 : 7),
    panControl: false,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.LARGE
    },
    streetViewControl: false,
    overviewMapControl: true,
    rotateControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: image,
    draggable: true,
    animation: google.maps.Animation.DROP
  });
  google.maps.event.addListener(marker, 'click', function(evt) {
    map.setZoom(20);
  });
  google.maps.event.addListener(map, 'zoom_changed', function() {
    var maptypes = map.mapTypes;
    var maptype = map.getMapTypeId();
    document.getElementById('info').innerHTML = "[" + maptype + "] zoom: " + map.getZoom();
    if (map.getZoom() >= map.mapTypes[maptype].maxZoom) {
      if (map.getMapTypeId() != google.maps.MapTypeId.HYBRID) {
        map.setMapTypeId(google.maps.MapTypeId.HYBRID)
        map.setTilt(0); // disable 45 degree imagery
      }
    }
  });
  var infowindow = new google.maps.InfoWindow();


  function moveMarker(placeName, latlng) {
    marker.setIcon(image);
    marker.setPosition(latlng);
    infowindow.setContent(placeName);
  }
});

body,
html,
#map_canvas {
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
<div id="info"></div>