rubens-fidelis · May 17, 2013 14:47
diff --git a/Mapa Fullscreen - Everton b/Mapa Fullscreen - Everton
 <!DOCTYPE html>
 <html lang="pt-BR">
 <head>
  <meta charset="utf-8">
  <title>Mapa</title>
  <!-- jQuery -->
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <!-- Bootstrap -->
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
  <link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
  <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
  <!-- Maps v3 -->
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
  <script>
  function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-8.724594, -63.914337),
      new google.maps.LatLng(-8.79127, -63.839836));
    map.fitBounds(defaultBounds);

    var input = /** @type {HTMLInputElement} */(document.getElementById('search-map'));
    var searchBox = new google.maps.places.SearchBox(input);
    var markers = [];

    google.maps.event.addListener(searchBox, 'places_changed', function() {
      var places = searchBox.getPlaces();

      for (var i = 0, marker; marker = markers[i]; i++) {
        marker.setMap(null);
      }

      markers = [];
      var bounds = new google.maps.LatLngBounds();
      for (var i = 0, place; place = places[i]; i++) {
        var image = {
          url: place.icon,
          size: new google.maps.Size(71, 71),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(17, 34),
          scaledSize: new google.maps.Size(25, 25)
        };

        var marker = new google.maps.Marker({
          map: map,
          icon: image,
          title: place.name,
          position: place.geometry.location
        });

        markers.push(marker);

        bounds.extend(place.geometry.location);
      }

      map.fitBounds(bounds);
    });

    google.maps.event.addListener(map, 'bounds_changed', function() {
      var bounds = map.getBounds();
      searchBox.setBounds(bounds);
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

  </script>
  <style>
    .map-container {
      top: -200%;
      width: 100%;
      height: 100%;
      position: fixed
    }
    .map-container .well {
      background: #fff
    }
    #search-box {
      top: 2%;
      left: 25%;
      width: 50%;
      z-index: 3;
      position: absolute
    }
    #search-box .well {
      height: 30px
    }
    #search-map {
      top: 10px;
      left: 36px;
      width: auto;
      right: 128px;
      padding: 4px 1%;
      position: absolute
    }
    #close-map {
      top: 10px;
      right: 10px;
      width: 120px;
      padding: 4px 0;
      position: absolute
    }
    #map-canvas {
      z-index: 2;
      width: 100%;
      height: 100%;
      position: absolute
    }
  </style>
 </head>
 <body>
  <button id="open-map" type="button" class="btn btn-small btn-success"><i class="icon-ok"></i> Abrir Mapa</button>
  <div class="map-container">
    <div id="search-box">
      <div class="well well-small">
        <div class="input-prepend input-append">
          <span class="add-on"><i class="icon-search"></i></span>
          <input class="span2" id="search-map" type="text">
          <button id="close-map" class="btn btn-danger" type="button"><i class="icon-remove"></i> Fechar Mapa</button>
        </div>
      </div>
    </div>
    <div id="map-canvas"></div>
  </div>
  <script>
    $(document).ready(function(){
      $("#open-map").click(function(){
        $(this).hide();
        $(".map-container").animate({ top: "0px"}, 0);
        $("#search-map").focus();
      });
      $("#close-map").click(function(){
        $(".map-container").animate({ top: "-200%"}, 0).prevAll("#open-map").show();
      });
    });
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="pt-BR">
	<head>
	<meta charset="utf-8">
	<title>Mapa</title>
	<!-- jQuery -->
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<!-- Bootstrap -->
	<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
	<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
	<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
	<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
	<!-- Maps v3 -->
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
	<script>
	function initialize() {
	var map = new google.maps.Map(document.getElementById('map-canvas'), {
	mapTypeId: google.maps.MapTypeId.ROADMAP
	});
	var defaultBounds = new google.maps.LatLngBounds(
	new google.maps.LatLng(-8.724594, -63.914337),
	new google.maps.LatLng(-8.79127, -63.839836));
	map.fitBounds(defaultBounds);

	var input = /** @type {HTMLInputElement} */(document.getElementById('search-map'));
	var searchBox = new google.maps.places.SearchBox(input);
	var markers = [];

	google.maps.event.addListener(searchBox, 'places_changed', function() {
	var places = searchBox.getPlaces();

	for (var i = 0, marker; marker = markers[i]; i++) {
	marker.setMap(null);
	}

	markers = [];
	var bounds = new google.maps.LatLngBounds();
	for (var i = 0, place; place = places[i]; i++) {
	var image = {
	url: place.icon,
	size: new google.maps.Size(71, 71),
	origin: new google.maps.Point(0, 0),
	anchor: new google.maps.Point(17, 34),
	scaledSize: new google.maps.Size(25, 25)
	};

	var marker = new google.maps.Marker({
	map: map,
	icon: image,
	title: place.name,
	position: place.geometry.location
	});

	markers.push(marker);

	bounds.extend(place.geometry.location);
	}

	map.fitBounds(bounds);
	});

	google.maps.event.addListener(map, 'bounds_changed', function() {
	var bounds = map.getBounds();
	searchBox.setBounds(bounds);
	});
	}

	google.maps.event.addDomListener(window, 'load', initialize);

	</script>
	<style>
	.map-container {
	top: -200%;
	width: 100%;
	height: 100%;
	position: fixed
	}
	.map-container .well {
	background: #fff
	}
	#search-box {
	top: 2%;
	left: 25%;
	width: 50%;
	z-index: 3;
	position: absolute
	}
	#search-box .well {
	height: 30px
	}
	#search-map {
	top: 10px;
	left: 36px;
	width: auto;
	right: 128px;
	padding: 4px 1%;
	position: absolute
	}
	#close-map {
	top: 10px;
	right: 10px;
	width: 120px;
	padding: 4px 0;
	position: absolute
	}
	#map-canvas {
	z-index: 2;
	width: 100%;
	height: 100%;
	position: absolute
	}
	</style>
	</head>
	<body>
	<button id="open-map" type="button" class="btn btn-small btn-success"><i class="icon-ok"></i> Abrir Mapa</button>
	<div class="map-container">
	<div id="search-box">
	<div class="well well-small">
	<div class="input-prepend input-append">
	<span class="add-on"><i class="icon-search"></i></span>
	<input class="span2" id="search-map" type="text">
	<button id="close-map" class="btn btn-danger" type="button"><i class="icon-remove"></i> Fechar Mapa</button>
	</div>
	</div>
	</div>
	<div id="map-canvas"></div>
	</div>
	<script>
	$(document).ready(function(){
	$("#open-map").click(function(){
	$(this).hide();
	$(".map-container").animate({ top: "0px"}, 0);
	$("#search-map").focus();
	});
	$("#close-map").click(function(){
	$(".map-container").animate({ top: "-200%"}, 0).prevAll("#open-map").show();
	});
	});
	</script>
	</body>
	</html>