Поменяйте местами несколько div, которые содержат несколько карт Google

0

Попытка иметь несколько gmaps на одной странице, которые находятся в скрытых div и поменялись. Первая карта отображается отлично, но все последующие при вызове являются частью серого и от центра. Я видел много сообщений как таковых, но ни одно из решений не сработало - даже google.maps.event.trigger (карта, "изменить размер");

Вот что у меня есть. Спасибо за любую помощь.

function displayMap() {
document.getElementById('map_canvas').style.display="block";
initialize();}
function displayMap2() {
document.getElementById('map_canvas2').style.display="block";
initialize();}
function displayMap3() {
document.getElementById('map_canvas3').style.display="block";
initialize();}
function displayMap4() {
document.getElementById('map_canvas4').style.display="block";
initialize();
}
  function initialize() {
  var myLatlng = new google.maps.LatLng(39.924186, -75.297571);
  var myLatlng2 = new google.maps.LatLng(40.152785, -76.750233);
  var myLatlng3 = new google.maps.LatLng(39.962254, -75.605264);
  var myLatlng4 = new google.maps.LatLng(40.152785, -76.750233);
  var mapOptions = {
    zoom: 13,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var mapOptions2 = {
    zoom: 13,
    center: myLatlng2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var mapOptions3 = {
    zoom: 13,
    center: myLatlng3,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var mapOptions4 = {
    zoom: 13,
    center: myLatlng4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  var map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions2);
  var map3 = new google.maps.Map(document.getElementById('map_canvas3'), mapOptions3);
  var map4 = new google.maps.Map(document.getElementById('map_canvas4'), mapOptions4);
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map
  });
  var marker2 = new google.maps.Marker({
      position: myLatlng2,
      map: map2
  });
  var marker3 = new google.maps.Marker({
      position: myLatlng3,
      map: map3
  });
  var marker4 = new google.maps.Marker({
      position: myLatlng4,
      map: map4
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

Сценарий свопа div

     jQuery(function(){
     jQuery('#showall').click(function(){
           jQuery('.targetDiv').show();
    });
    jQuery('.showSingle').click(function(){
          jQuery('.targetDiv').hide();
          jQuery('#div'+$(this).attr('target')).show();
    });
    });

Html

    <div class="left_club" style="float:left; width:200px; margin-right:15px;">
    <h3>Men Clubs</h3>
    <p><a class="showSingle" target="1" onclick="displayMap()">Royal Legends VBC</a><br>
    <a class="showSingle" target="2" onclick="displayMap2()">Yorktowne VBC</a></p>

    <h3>Women Clubs</h3>
    <p><a class="showSingle" target="3" onclick="displayMap3()">Lokahi</a><br>
    <a class="showSingle" target="4" onclick="displayMap4()">Yorktowne VBC</a></p>
    </div>

    <div class="targetDiv" id="div1" style=" display:inline;">
    <h2>Royal Legends VBC</h2>
    <p>Contact | <a href="mailto:sample.com">sample</a><br>
Location | Clifton Heights, PA 19018<br>
Phone Number | sample<br>
Website | <a href="http://sample.com/" target="_blank">sample</a>
    <div id="map_canvas"></div>
    </div>

    <div class="targetDiv" id="div2">
    <h2>Yorktowne VBC</h2>
    <p>Contact | <a href="mailto:sample.com">sample</a><br>
Location | Etters PA 17319<br>
Phone Number | sample<br>
Website | <a href="http://www.sample.com/" target="_blank">sample</a>
    <div id="map_canvas2"></div>
    </div>

    <div class="targetDiv" id="div3">
    <h2>Lokahi</h2>
    <p>Contact | <a href="mailto:sample.net">sample</a><br>
Location | West Chester PA 19380<br>
Phone Number | sample<br>
    <div id="map_canvas3"></div>
    </div>

    <div class="targetDiv" id="div4">
    <h2>Yorktowne VBC</h2>
    <p>Contact | <a href="mailto:sample.com">sample</a><br>
Location | Etters PA 17319<br>
Phone Number | sample<br>
Website | <a href="http://www.sample.com/" target="_blank">Yorktowne VBC</a>
    <div id="map_canvas4"></div>
    </div

Css

    #map_canvas {margin-top:10px;width: 455px;height: 240px;float:left;border:1px solid #dcdcdc; margin-left:0px; margin-bottom:0px;}
    #map_canvas2 {margin-top:10px;width: 455px;height: 240px;float:left;border:1px solid #dcdcdc; margin-left:0px; margin-bottom:0px;}
    #map_canvas3 {margin-top:10px;width: 455px;height: 240px;float:left;border:1px solid #dcdcdc; margin-left:0px; margin-bottom:0px;}
    #map_canvas4 {margin-top:10px;width: 455px;height: 240px;float:left;border:1px solid #dcdcdc; margin-left:0px; margin-bottom:0px;}
    .showSingle {cursor:pointer;}
    .targetDiv {float:left; width:458px; padding:20px;border:1px solid #dcdcdc; background-color:#f0efee;}

js, чтобы скрыть карты после первой карты

    jQuery(function(){
    $('#div2, #div3, #div4').hide();
    });
  • 0
    Можете ли вы показать нам свой CSS?
  • 0
    Вы не можете работать со скрытием и показом, это приводит к отображению: нет, и это приведет к переполнению карты при инициализации, а затем к скрытию и отображению. Когда вы показываете это, вы увидите только один квадрат карты вверху слева. чтобы избежать этого, вы должны сохранять статическую ширину и высоту, поэтому видимость: скрытый наш друг или позиция: абсолютный и левый: -9999px, если не отображается, и если показывается слева: 0, что-то подобное
Показать ещё 3 комментария
Теги:

1 ответ

1
Лучший ответ

Я знаю, что эта проблема очень хорошая, вот одно из возможных решений, изложенных в моем комментарии,

Проблема в том, что когда вы инициируете карту google для элемента с шириной и высотой, и после этого установите его для отображения: none, а затем отобразите: снова блок (скрыть/показать), он будет отображать карту.

Теперь на этой скрипке, когда отображается другая карта или какая-либо карта скрыта, ширина и высота контейнеров не затрагиваются, они просто перемещаются горизонтально, http://jsfiddle.net/LNYSE/

css, все карты инициализированы где-то так левыми, пользователи не видят.

.targetDiv {position:absolute;top:220px; width:458px;left:-999px; padding:20px;border:1px solid #dcdcdc; background-color:#f0efee;}

html, только первая карта видна, потому что слева: 0

<div class="targetDiv activeYo" id="div1" style=" display:inline;left:0;">

вот js, вам не нужно использовать функцию анимации, которую вы также можете использовать только .css('left',0)

jQuery('.showSingle').click(function(){
    jQuery('.activeYo').animate({left:-999}).removeClass('activeYo');
    jQuery('#div'+$(this).attr('target')).animate({left:0}).addClass('activeYo');
});

без анимации http://jsfiddle.net/LNYSE/1/

ура

  • 0
    Я попробую и дам вам знать. Спасибо за вашу помощь @johnSmith.
  • 0
    Это сработало! Спасибо за помощь @johnSmith. Во всяком случае, чтобы минимизировать JS, у меня есть несколько страниц, которые будут иметь более 25 карт. Еще раз спасибо. KM
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню