谷歌地图在Twitter Bootstrap Popver [英] Google Map in Twitter Bootstrap Popver

问题描述

我使用的是Twitter的Bootstrap，并希望在，并避免与交互式地图相关的麻烦。从文档中借用一个非常简单的例子，你可能会这样做：

  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）
  

包装它成为一个可重用的函数产生：

$ $ p $ $ $ $ c $ 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 = [];
$ b $ .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}）

I'm using Twitter's Bootstrap, and want to show a Google Map in a popover.

The way it works right now I'm doing something like this

$ ->
  $('.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()

The popover loads it's content from a .popover-contents div which is hidden, and connected to the a with data attributes (so that I can find the correct popover to show)

The map works perfectly when not in a popover, and I think it's connected with being copied via html() in jQuery to another DOM element. Twitter's bootstrap doesn't provide a modal opened callback, and I'm genuinely not sure how to make the maps work.

As you can see the map works correctly on the full profile page, the markup is the same (rails partial), and the javascript is shared, too - I can only assume the GoogleMaps API really doesn't like having it's dom messed with, and is thus causing issues.

解决方案

If you're using popovers, your best bet might be to use google's static API and avoid the headaches associated with an interactive map. Borrowing a very simple case from the documentation, you might do something like this:

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)

Wrapping it up into a reusable function yields:

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 })

这篇关于谷歌地图在Twitter Bootstrap Popver的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！