Tema: Div y google maps
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 27/07/2011, 17:22
Avatar de abimaelrc
abimaelrc
Colaborador
  
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 15 años, 7 meses
Puntos: 1517
Respuesta: Div y google maps
Algo así
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.     <title>test</title>
  6.     <style>
  7.     *{ margin: 0; padding: 0; }
  8.     html, body, #map{
  9.         width: 100%;
  10.         height: 100%;
  11.     }
  12.     #menu{
  13.         width: 200px;
  14.         margin: 0 auto;
  15.         border: 1px solid #333333;
  16.         position: relative;
  17.         top: -50px;
  18.         text-align: center;
  19.         padding: 5px;
  20.     }
  21.     </style>
  22.     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
  23.     <script type="text/javascript">
  24.     /**
  25.      * Listener para el formulario
  26.      */
  27.     function addListener(element, type, expression, bubbling)
  28.     {
  29.         bubbling = bubbling || false;
  30.  
  31.         if(element.addEventListener) { // Standard
  32.             element.addEventListener(type, expression, bubbling);
  33.             return true;
  34.         }else if(element.attachEvent) { // IE
  35.             element.attachEvent('on' + type, expression);
  36.             return true;
  37.         }else return false;
  38.     }
  39.  
  40.     window.onload = function(){
  41.         var fooArr = [], barArr = [], bazArr = [];
  42.         var options = {
  43.             zoom: 9
  44.             , center: new google.maps.LatLng(18.2, -66.3)
  45.             , mapTypeId: google.maps.MapTypeId.ROADMAP
  46.         };
  47.      
  48.         var map = new google.maps.Map(document.getElementById('map'), options);
  49.  
  50.         var southWest = new google.maps.LatLng(17.85, -67.35);
  51.         var northEast = new google.maps.LatLng(18.55, -65.2);
  52.         var lngSpan = northEast.lng() - southWest.lng();
  53.         var latSpan = northEast.lat() - southWest.lat();
  54.  
  55.         for(var i=1; i<=1000; i++){
  56.             var lat = southWest.lat() + latSpan * Math.random();
  57.             var lng = southWest.lng() + lngSpan * Math.random();
  58.             var latlng = new google.maps.LatLng(lat, lng);
  59.             var marker = new google.maps.Marker({
  60.                 position: latlng
  61.             });
  62.  
  63.             if((i%3) == 0){ bazArr.push(marker); }
  64.             else if((i%2) == 0){ barArr.push(marker); }
  65.             else{ fooArr.push(marker); }
  66.         }
  67.  
  68.         document.getElementById('foo').checked = true;
  69.         for(var i in fooArr){
  70.             fooArr[i].setMap(map);
  71.         }
  72.  
  73.         addListener(document.getElementById('foo'), 'click', function(){
  74.             if(this.checked){
  75.                 for(var i in fooArr){
  76.                     fooArr[i].setMap(map);
  77.                 }
  78.             }else{
  79.                 for(var i in fooArr){
  80.                     fooArr[i].setMap(null);
  81.                 }
  82.             }
  83.         });
  84.         addListener(document.getElementById('bar'), 'click', function(){
  85.             if(this.checked){
  86.                 for(var i in barArr){
  87.                     barArr[i].setMap(map);
  88.                 }
  89.             }else{
  90.                 for(var i in barArr){
  91.                     barArr[i].setMap(null);
  92.                 }
  93.             }
  94.         });
  95.         addListener(document.getElementById('baz'), 'click', function(){
  96.             if(this.checked){
  97.                 for(var i in bazArr){
  98.                     bazArr[i].setMap(map);
  99.                 }
  100.             }else{
  101.                 for(var i in bazArr){
  102.                     bazArr[i].setMap(null);
  103.                 }
  104.             }
  105.         });
  106.     };
  107.     </script>
  108. </head>
  109. <body>
  110.     <div id="map"></div>
  111.     <div id="menu">
  112.         <form action="index.html" method="get">
  113.             <input type="checkbox" id="foo" name="fooBarBaz" /> <label for="foo">Foo</label>
  114.             <input type="checkbox" id="bar" name="fooBarBaz" /> <label for="bar">Bar</label>
  115.             <input type="checkbox" id="baz" name="fooBarBaz" /> <label for="baz">Baz</label>
  116.         </form>
  117.     </div>
  118. </body>
  119. </html>
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos