Вопрос по google-maps, html, html5, javascript, twitter-bootstrap – Google Map в Twitter Bootstrap Popver

2

Я использую Bootstrap в Твиттере и хочу показать карту Google втрещать.

Как это работает прямо сейчас, я делаю что-то вроде этого

$ ->
  $('.thumbnails a.js-popover').popover
    html: true,
    content: ->
      uid = $(this).data('profileUid')
      popover_container = $('.popover-contents:data(profileUid=' + uid + ')')
      _.each window.Maps, (map) ->
        google.maps.event.trigger map, 'resize' // I hoped this would re-draw the map
      popover_container.html()

Поповер загружает его содержимое из.popover-contents div, который скрыт и связан сa с атрибутами данных (чтобы я мог найти правильный поповер, чтобы показать)

The map works perfectly, when not in a popover

Карта отлично работает, когда не в поповере, и я думаю, что это связано с копированием черезhtml() в jQuery для другого элемента DOM. Загрузчик Twitter не предоставляетmodal opened обратный вызов, и я действительно не уверен, как заставить карты работать.

enter image description here

Как вы можете видеть, карта работает корректно на странице полного профиля, разметка такая же (частично рельсы), и javascript также используется совместно - я могу только предположить, что API GoogleMaps действительно не нравится иметь его.dom перепутал, и, таким образом, вызывает проблемы.

Если вам не нужна интерактивность на этих картах, используйте статический API (developers.google.com/maps/documentation/staticmaps) может быть в состоянии сохранить много боли и страданий! : ^) rjz
Ха, сделаю. Спасибо за предложение! rjz
rjz Спасибо. В этом всплывающем окне статическая карта идеальна. Предлагаем вам написать краткий ответ о влиянии & quot; использовать статическую карту & lt; link & gt; в вашем поповере и везде используйте карты JS & quot; (Вы не можете переместить фокус на поповер, поэтому интерактивность бесполезна :)) Lee Hambley

Ваш Ответ

3   ответа
6

статический API Google и избежать головной боли, связанной с интерактивной картой. Заимствованиеvery Простой случай из документации, вы можете сделать что-то вроде этого:

var options = { content: '<img src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=512x512&maptype=roadmap&sensor=false">' };

$('#example').popover(options)

Оборачивая это в повторно используемую функцию, получаем:

var getMap = function(opts) {
  var src = "http://maps.googleapis.com/maps/api/staticmap?",
      params = $.extend({
        center: 'New York, NY',
        zoom: 14,
        size: '512x512',
        maptype: 'roadmap',
        sensor: false
      }, opts),
      query = [];

  $.each(params, function(k, v) {
    query.push(k + '=' + encodeURIComponent(v));
  });

  src += query.join('&');
  return '<img src="' + src + '" />';
}

var content = getMap({center: 'Fritz-Walter Stadion, Kaiserslautern'});
$('#example').popover({ content: content })
Работает но пришлось добавитьhtml:true к всплывающим опциям:bootply.com/116622
Отлично! Так как нельзя перемещать фокус на всплывающее окно (всплывающее окно исчезает, когда вы наводите курсор на то, что сработало, статические карты будут идеальными) Я все еще использую тот же код для динамических карт на страницах реального профиля, но это работает намного лучше для поповерс. Lee Hambley
@Beaks, я обернул его с легкостью в использовании, просто для удовольствия: ^)
0

что для API Google Maps требуется видимый элемент для контейнера, поэтому вы должны вызвать API внутриshown.bs.modal обработчик события. Что-то вроде этого:

$picker.popover({
    html: true,
    content: '<div class="superPopover">'
});

$picker.on('shown.bs.popover', function () {
    var $container = $('.superPopover');
    new google.maps.Map($container[0]);
});
1

Another valid answer might be found here, but it's not the solution I took.

Похоже, что общепризнанно, что отображение карты Google в невидимом элементе DOM приводит к появлению ошибок и решению (см.http://sethmatics.com/articles/classipress-hidden-map-tab-and-redraw-google-map-canvas/ ) выглядит примерно так:


jQuery('.tabprice ul.tabnavig li a').click(function() {
    if(jQuery(this).attr('href') == '#priceblock1') {
        //the element has to be visible on the page for google maps to render properly
        jQuery('#priceblock1').show();
        //rebuild the google map canvas to the proper size
        google.maps.event.trigger(map, 'resize'); 
        //ClassiPress javascript function to build map at address
        codeAddress(); 
    }
});

Я думаю, что, возможно, стоило бы переместить элемент dom далеко влево / вправо / вниз экрана, чтобы он не мигал пользователю, или что-то сделать с Z-индексированием, чтобы убедиться, что пользователь не 't' увидеть нежелательное всплывающее окно.

Однако в моем случае API статических карт, предложенный rjz, был идеальным.

Похожие вопросы