лайтбокс гугл карта - PullRequest
Новая
       1

лайтбокс гугл карта

0 голосов
/ 29 июня 2011

У меня есть изображение карты моего офиса, которое я хотел бы использовать на своем веб-сайте, но я хочу, чтобы у пользователя была возможность нажать на изображение, чтобы открыть местоположение карт Google в лайтбоксе. ...

Я просмотрел вопросы здесь, чтобы найти ответ, но не могу найти его!

По сути, у меня есть: 

<a href="http://maps.google.co.uk/maps?q=????????&hl=en&sll=???????,-???????1&sspn=??.??????,??.5??????&z=??" target="_blank"><img src="css/images/map.gif" width="655" height="320" /></a>

Map.gif - это анимированный GIF. Единственный javascript, который у меня сейчас есть на странице, это 

<script type='text/javascript' src='jquery-1.4.3.min.js'></script>
<script type="text/javascript">
$(function(){  // $(document).ready shorthand
$('#map').hide().fadeIn(2000);
});
</script>

, который выцветает на экране. Любые идеи !!

Спасибо JD

1 Ответ

0 голосов
/ 30 июня 2011

Это мой способ справиться с таким событием

  1. вставьте <div id='lightbox' class='white_content'></div> и <div id='fade' class='class='black_overlay'></div> в ваш HTML-файл.

2. Ваш CSS для лайтбокса: 

.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 650px;
    height: 500px;
    padding: 16px;
    border: 16px solid white;
    border-radius: 15px;
    background-color: white;
    z-index:1002;
    overflow: auto;
    -moz-box-shadow: 5px 5px 10px black;
    -webkit-box-shadow: 5px 5px 10px black;
    box-shadow: 5px 5px 10px black;
}
   .black_overlay{
    display: none;
    position: absolute;
        top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.5;
    opacity:.50;
    filter: alpha(opacity=100);
}

  1. И, наконец, вам нужен JavaScript:

    function showLightBox() { document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'; }

Когда вы хотите скрыть лайтбокс, вы создаете пользовательскую функцию для вызова, которая устанавливает document.getElementById('light').style.display='none'; и document.getElementById('fade').style.display='none';

Чтобы получить карту Google внутри вашего лайтбокса, используйте эту строку кода внутри вашего JavaScript: 

document.getElementById('light').innerHTML = " content to show here ";

для отправки контента в лайтбокс. Обычно вы используете Ajax для передачи контента в лайтбокс

Если вы не знаете, как встраивать карты Google, вы можете найти документацию здесь:

http://code.google.com/apis/maps/documentation/javascript/

...