Div y google maps

Bernoo · #1 (**permalink**) 27/07/2011, 16:27

DUDA enorme: estoy trabajando con google maps y capas DIV; el gogle map automaticamente se almacena en un DIV, quiero trabajar con dos DIV a la vez, uno encima de otro, es decir el div que contiene el google map y otro dip encima q sea transparente, hay alguna funcion o algun elemento que me ayudea que lo que yo lo haga al MAPA se quede plasamado en el DIV transparente, es decir como si el DIV de encima no exisitiera, les agradeceria si me muestran ejemplos !

abimaelrc · #2 (**permalink**) 27/07/2011, 17:22

Algo así

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>test</title>
    <style>
    *{ margin: 0; padding: 0; }
    html, body, #map{
        width: 100%;
        height: 100%;
    }
    #menu{
        width: 200px;
        margin: 0 auto;
        border: 1px solid #333333;
        position: relative;
        top: -50px;
        text-align: center;
        padding: 5px;
    }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
    <script type="text/javascript">
    /**
     * Listener para el formulario
     */
    function addListener(element, type, expression, bubbling)
    {
        bubbling = bubbling || false;
 
        if(element.addEventListener) { // Standard
            element.addEventListener(type, expression, bubbling);
            return true;
        }else if(element.attachEvent) { // IE
            element.attachEvent('on' + type, expression);
            return true;
        }else return false;
    }
 
    window.onload = function(){
        var fooArr = [], barArr = [], bazArr = [];
        var options = {
            zoom: 9
            , center: new google.maps.LatLng(18.2, -66.3)
            , mapTypeId: google.maps.MapTypeId.ROADMAP
        };
     
        var map = new google.maps.Map(document.getElementById('map'), options);
 
        var southWest = new google.maps.LatLng(17.85, -67.35);
        var northEast = new google.maps.LatLng(18.55, -65.2);
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();
 
        for(var i=1; i<=1000; i++){
            var lat = southWest.lat() + latSpan * Math.random();
            var lng = southWest.lng() + lngSpan * Math.random();
            var latlng = new google.maps.LatLng(lat, lng);
            var marker = new google.maps.Marker({
                position: latlng
            });
 
            if((i%3) == 0){ bazArr.push(marker); }
            else if((i%2) == 0){ barArr.push(marker); }
            else{ fooArr.push(marker); }
        }
 
        document.getElementById('foo').checked = true;
        for(var i in fooArr){
            fooArr[i].setMap(map);
        }
 
        addListener(document.getElementById('foo'), 'click', function(){
            if(this.checked){
                for(var i in fooArr){
                    fooArr[i].setMap(map);
                }
            }else{
                for(var i in fooArr){
                    fooArr[i].setMap(null);
                }
            }
        });
        addListener(document.getElementById('bar'), 'click', function(){
            if(this.checked){
                for(var i in barArr){
                    barArr[i].setMap(map);
                }
            }else{
                for(var i in barArr){
                    barArr[i].setMap(null);
                }
            }
        });
        addListener(document.getElementById('baz'), 'click', function(){
            if(this.checked){
                for(var i in bazArr){
                    bazArr[i].setMap(map);
                }
            }else{
                for(var i in bazArr){
                    bazArr[i].setMap(null);
                }
            }
        });
    };
    </script>
</head>
<body>
    <div id="map"></div>
    <div id="menu">
        <form action="index.html" method="get">
            <input type="checkbox" id="foo" name="fooBarBaz" /> <label for="foo">Foo</label>
            <input type="checkbox" id="bar" name="fooBarBaz" /> <label for="bar">Bar</label>
            <input type="checkbox" id="baz" name="fooBarBaz" /> <label for="baz">Baz</label>
        </form>
    </div>
</body>
</html>