Google Maps V3 инфобокс - расширить границы карты?

Я разрабатываю wordpress plugin, который отображает некоторые фотографии на карте. Подробная информация отображается в инфобоксах/инфо-окнах.Google Maps V3 инфобокс - расширить границы карты?

Это прекрасно подходит для карт 6, карты, отображающие границы карт.

Пример: http://www.denktfrei.de/?p=805

Теперь я wan't, чтобы добавить поддержку для Google Maps 3 и Bing Maps 7. Оба API-интерфейсы не поддерживают такие infoboxes, то инфобокс/InfoWindow не может быть больше, чем карта. Как я могу вообще создать такие инфобокс?

источник

2013-02-17 frest.de

То, что вы легко можете сделать, это управлять своим собственным инфобоксом из контроля карты и установить свою позицию на основе относительного положения на странице. Таким образом, инфобокс не будет «привязан» к элементу управления. Он может работать на обоих API. –

Да, это должно сработать. Я использую маркеры DOM и opentip-works отлично! ;) –

Как описано в комментарии, я бы рекомендовал использовать пользовательский инфобокс, добавленный в DOM из самого элемента управления картой. Таким образом, вы не будете ограничиваться контейнером DIV элемента управления картой.

Смотрите ниже код для примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title> 
    <script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"> 
    </script> 
    <script type="text/javascript"> 
     var map = null; 

     function getMap() { 

      map = new Microsoft.Maps.Map(
       document.getElementById('myMap'), 
       { 
        credentials: 'YOURKEY', 
        showCopyright: false 
       }); 

      // Create the pushpin 
      var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.5, 2.75)); 

      // Add the pushpin to the map 
      map.entities.push(pushpin); 

      // Bind the click event on the pushpin 
      Microsoft.Maps.Events.addHandler(pushpin, 'click', function(e) { 
       if (e.targetType == 'pushpin') { 
        var box = document.getElementById('infobox'); 
        box.style.top = e.pageY + 'px'; 
        box.style.left = e.pageX + 'px'; 
        box.style.visibility = 'visible'; 
       } 
      }); 
     } 

    </script> 
</head> 
<body onload="getMap();"> 
    <div id="container" style="position:relative;"></div> 
    <div id="myMap" style="position: absolute;z-index:1; width: 800px; height: 600px;"> 
    </div> 
    <div id="infobox" style="float:left;z-index:2; visibility:hidden;position:absolute; width:500px; height: 300px; background-color:White; border: 1px solid #333;">Sample content for an infobox which should be larger than the map control.</div> 
</body> 
</html>

источник

2013-02-21 22:40:28

отлично работает, спасибо! –

Google Maps V3 инфобокс - расширить границы карты?

ответ

Смежные вопросы