35
Я пытаюсь настроить карту Google, которая будет отображаться при нажатии ссылки, а затем скрыть, когда будет нажата другая ссылка. Все работает отлично, за исключением случаев, когда я показываю карту с дисплея: нет, она не отображается должным образом.Карт Google Maps: Нет Проблема
Я прочитал об использовании google.maps.event.trigger (map, 'resize'); но я не достаточно с Javascript и JQuery специалистами, чтобы узнать, как добавить его в
Вот код, я использую:.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<style type="text/css">
#viewmap {
position:relative;
width:944px;
float:left;
display:none;
}
#hidemap {
position:relative;
width:944px;
float:left;
display:block;
}
#map_canvas {
position:relative;
float:left;
width:944px;
height:300px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-27.999673,153.42855);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var contentString = 'blah';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
function toggleDiv1(viewmap){
if(document.getElementById(viewmap).style.display == 'block'){
document.getElementById(viewmap).style.display = 'none';
}else{
document.getElementById(viewmap).style.display = 'block';
}
}
function toggleDiv2(hidemap){
if(document.getElementById(hidemap).style.display == 'none'){
document.getElementById(hidemap).style.display = 'block';
}else{
document.getElementById(hidemap).style.display = 'none';
}
}
</script>
</head>
<body>
<div id="viewmap">
<a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">Hide map</a>
<div id="map_canvas"></div>
</div>
<div id="hidemap">
<a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a>
</div>
</body>
</html>
Любая помощь будет высоко ценится,
Квентин
Привет Хавьер, есть ли способ сделать это без использования абсолютного позиционирования? Вы знаете, как реализовать google.maps.event.trigger (map, 'resize'); в мой код? –
Привет, я внес некоторые незначительные изменения в ваш javascript и отлично работает для меня, я поместил переменную map вне функции, чтобы она могла быть доступна для других функций (в вашем случае функция toggleDiv1), а затем, когда ваш div отобразится снова , вы можете вызвать событие изменения размера. Я предлагаю вам сделать это с помощью jQuery, чтобы избежать лишнего кода. – javiertoledos
Это похоже на отображение карты, но по какой-то причине оно не сосредоточено там, где должно быть. Если вы прокрутите влево, появится красный шар, где он должен быть центрирован. Он отлично работает, если сделать карту видимой с самого начала. Но что-то происходит, когда div не блокирует, и он не остается центрированным. Вы знаете, почему это может быть? –