minhd
1/2/2012 - 12:10 PM

Google map Fullscreen with jQuery

Google map Fullscreen with jQuery

$(function() {
  var map = new google.maps.Map(document.getElementById("map_canvas"), {});
  var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);

  var googleMapWidth = $("#map_canvas").css('width');
  var googleMapHeight = $("#map_canvas").css('height');

  map.setCenter(newyork);

  $('#enter-full-screen').click(function(){
    $("#map_canvas").css("position", 'fixed').
      css('top', 0).
      css('left', 0).
      css("width", '100%').
      css("height", '100%');
    google.maps.event.trigger(map, 'resize');
    map.setCenter(newyork);
    return false;
  });

  $('#exit-full-screen').click(function(){
    $("#map_canvas").css("position", 'relative').
      css('top', 0).
      css("width", googleMapWidth).
      css("height", googleMapHeight);
    google.maps.event.trigger(map, 'resize');
    map.setCenter(newyork);
    return false;
  });
});